风格选择显示左侧和右侧的值

大家好，你们大家有没有想法如何设计类似于this的下拉式样？使用jQuery或任何其他库。基本上，左边和右边都有价值。我已经查阅了它，似乎你不允许在选项标签内放置任何其他元素。风格选择显示左侧和右侧的值

谢谢！

2017-08-10 hd454ci

的StackOverflow是不是免费的代码编写服务。你能告诉我们你实际上已经尝试过吗？ – Terry

这不是一个选择标记，他们已经使用其他元素从头开始重新构建控件。您可以使用ul/li来构建列表并为主要元素使用div。然后你必须编写所有的CSS和JS/jQuery来处理鼠标，悬停，键盘快捷键等。 – SeanKendle

你不能select元素做到这一点，则必须通过UL和李创建，也jQuery的帮助。

像这样：

$(document).ready(function(){ 
 
    $('.txt,span').click(function(){ 
 
    $('ul').toggle(); 
 
}) 
 
    $('li').click(function(){ 
 
    var text = $(this).html(); 
 
    $('.txt').html(text); 
 
    $('ul').hide(); 
 
    }) 
 
})

* { 
 
    box-sizing: border-box; 
 
} 
 

 
.wrapper { 
 
    width : 400px; 
 
    position: relative; 
 
    border: 1px solid #CCC; 
 
    cursor: pointer; 
 
} 
 

 
.txt { 
 
    width: 95%; 
 
    height: 20px; 
 
    padding: 0 10px 0 0; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
} 
 

 
ul { 
 
    padding: 0; 
 
    position: absolute; 
 
    list-style: none; 
 
    border: 1px solid #CCC; 
 
    margin-top: 0; 
 
    display: none; 
 
    z-index: 100; 
 
    width:100%; 
 
} 
 

 
li { 
 
width:100%; 
 
} 
 

 
li:nth-child(odd) { 
 
    background-color: #CCC; 
 
} 
 

 
span { 
 
    position: absolute; 
 
    right: 0; 
 
    z-index: 200; 
 
    top: 0; 
 
} 
 
.txt b,li b { 
 
    float: right; 
 
} 
 

 
b { 
 
    margin-left: 25px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<div class="wrapper"> 
 
    <div class="txt"></div><span>▾</span> 
 
    <ul> 
 
    <li>Instalation full Service<b>299.00THB</b></li> 
 
    <li>Other instalation full Service<b>300.00THB</b></li> 
 
    </ul> 
 
</div>

来源

2017-08-10 13:36:32 Ehsan