chosen組件用于增強原生的select控件，使之有更好的用戶體驗。官方demo?https://harvesthq.github.io/chosen/

目前項目中碰到的使用，比如一個頁面中有兩個不同樣式的下拉框：

1、首先在js文件夾中建一個名為chosen的文件夾，放入這樣幾個文件：

2、在html頁面中引入chosen的css和js文件：

3、在html中寫這兩個下拉框：

1 <div class="myselect1 mt10 ml10"> 2 <select id="select1" class="myselect"> 3 <option value="1">中國</option> 4 <option value="2">美國</option> 5 <option value="3">韓國</option> 6 </select> 7 <span>下拉框1</span> 8 </div> 9 <div class="myselect2 mt10 ml10"> 10 <select id="select2" class="myselect"> 11 <option value="1">北京</option> 12 <option value="2">華盛頓</option> 13 <option value="3">首爾</option> 14 </select> 15 <span>下拉框2</span> 16 </div>

頁面效果為普通的select樣式：

4、在js中初始化這兩個下拉框：

1 (function(win, $) { 2 3 // 初始化下拉框 4 $("select").chosen({ 5 disable_search: true 6 }).change(function(event, opt) { 7 // 獲取選中的值 8 var val = $(this).find("option:selected").html(); 9 console.log(val); 10 }); 11 }(this, jQuery));

效果就變成了官方預設的下拉效果（當文字過長時會自動顯示部分省略號）：

5、給這兩個下拉框寫樣式：

/*兩個框的寬度是通過這樣直接指定的方式設定的*/ .myselect1 select {width: 100px; } .myselect2 select {width: 150px; }/*#region 重寫下拉框 */ /*兩個下拉框的相同樣式直接重寫*//*整個框外觀上的樣式*/ .chosen-container {margin-right: 100px;float: left;text-align: center;*padding: 5px 0; }.chosen-container .chosen-results {padding: 0;margin-right: 0; } /*下拉框的那個框的樣式*/ .chosen-container-single .chosen-single {background: #f9f9f9;border: 0;border-radius: 0;box-shadow: none;
　　/*后來的測試中發現，這個height是包括邊框的高度*/
　 line-height: 36px;height: 36px; }.chosen-container-single .chosen-single span {margin-right: 26px;letter-spacing: 2px;margin-left: 4px; } /*下拉項*/ .chosen-container .chosen-results li {letter-spacing: 4px; }.chosen-container-single .chosen-single div {padding: 0;width: 21px; } /*圖標*/ .chosen-container-single .chosen-single div b {background: url(../images/bg.png) no-repeat left 15px; }.chosen-container-active.chosen-with-drop .chosen-single div b {background: url(../images/bg.png) no-repeat left 15px; } /*當下拉項顯示出來時下拉框的那個框的樣式*/ .chosen-container-active.chosen-with-drop .chosen-single {background: #f9f9f9;box-shadow: none;border: 0;border-radius: 0; }.chosen-container-single .chosen-drop {border: 1px solid #f9f9f9;background-color: #f9f9f9;box-sizing: border-box; }.chosen-container .chosen-results li.highlighted {background-color: #397ddb;background-image: none; } /*給其中一個框分別指定個性的樣式，另一個框的樣式設定方式同理，使用父選擇器進行限制*/ .myselect1 .chosen-container {text-align: left; } .myselect1 .chosen-container-single .chosen-single {background-color: #f00;color: #fff;font-size: 20px; } .myselect1 .chosen-container .chosen-results li {letter-spacing: 0;padding-left: 12px; } .myselect1 .chosen-container-active.chosen-with-drop .chosen-single {background: #0f0;border: 1px solid #f00; }

（當下拉框需要浮動時，所在的div層不能寫overflow:hidden；這樣點擊框后框會消失得幾乎不見，所以要在所在的div清除浮動）：

效果圖：

? ? ? ? ? ? ?

經測試，以上效果是在chrome，ff，IE8、9、10下的顯示，在IE7中顯示達不到效果：

至少整個外觀樣式不合格（下拉框和右邊文字的距離沒拉開），所以可以在css中直接針對IE7寫hack樣式：

?

?然后距離至少是拉開了的：

====================================分割線 2016.10.10=========================================

?

轉載于:https://www.cnblogs.com/junsoo-jun/p/5890892.html

總結

以上是生活随笔為你收集整理的chosen组件实现下拉框的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。