スタイルを選択すると、左右に値が表示されます

Question

こんにちは皆さんはthisのようなドロップダウンをどのようにスタイルするか考えていますか？ jQueryやその他のライブラリを使用しています。基本的には、左にも右にも値があります。私はそれを見てきましたが、オプションタグの中に他の要素を入れることは許されていないようです。

ありがとうございます！

Answer 1

あなたは、select要素でそれを行うことができないあなたは、ULおよびLiでそれを作成する必要があり、また、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>

Answer 2

私は、次のリンクをチェックアウトドロップダウンにバッジのためのセクションに移動し、MaterializeCSSで行われている同様のものを見てきました： http://materializecss.com/dropdown.html#： http://materializecss.com/badges.html

いくつかの類似したものはで利用可能です！ も同様です。

私はそれが役に立ちそうです。

Answer 3

jQueryのUIを使用してみてください、彼らはあなたがカスタマイズすることができますselectスタイルのメニューを持っている：

Selectmenu

複製し、ネイティブのHTMLの機能は、ネイティブの限界を克服するために 要素を選択拡張コントロール。

https://jqueryui.com/selectmenu/#custom_render