<input list="browsers">
<datalist id="browsers">
 <option value="Internet Explorer">
 <option value="Firefox">
 <option value="Chrome">
 <option value="Opera">
 <option value="Safari">
</datalist>

優(yōu)點：節(jié)約js代碼；

缺點：IE 9及以下的IE瀏覽器和 Safari 均不支持 <datalist> 標簽（好像還有幾個瀏覽器也不支持）；重復點擊輸入框或者下拉圖標并不能收回下拉列表；樣式難以控制

2.使用基于jQuery的select2插件（需要同時引入select2.css和select2.js），html部分代碼如下：

<select class="select2_test" >
 <option></option>
 <option value="1">1</option>
 <option value="2">2</option>
 <option value="3">3</option>
</select>

js部分代碼如下：

$('.select2_test').select2({
 placeholder: "請選擇所屬選項",
 allowClear: true;
});

注意：與bootstrap的Modal模態(tài)框結合使用時，會出現(xiàn)下拉列表出現(xiàn)在遮罩層的底層和點擊彈出框關閉按鈕但下拉列表并沒有消失的問題，找了半天原來問題出在select2.css這個樣式表中，

原因：點擊輸入框，此插件會生成一個遮罩層(類名為.select2-drop-mask)和一個下拉列表(類名為.select2-drop)，這兩者的層疊性(z-index)依次為9991，9992，但是modal彈出框的層疊性大于10000，所以才會導致出現(xiàn)上述兩個問題

解決辦法：如果將.select2-drop-mask和.select2-drop的z-index分別提高到19991、19992，下拉列表成功顯示在上面，但在打開了下拉列表的前提下點擊modal彈出框的關閉按鈕會先收回下拉框，再次點擊才能關閉彈出窗，用戶體驗不是很好；這里可以嘗試提高關閉按鈕的z-index，前提一定要父元素不能是modal彈出框，否則其提高的z-index無效。

如果想更深入了解select2.js插件，可以參考http://www.dbjr.com.cn/article/95561.htm

3.造成select2.js上述不適的主要原因在于.select2-drop的失去焦點是要點到select2-drop-mask上才能觸發(fā)，為改善這種機制，這里推薦另一款基于jQuery的下拉搜索框插件magicsuggest（需要同時引入magicsuggest.css和magicsuggest.js），html部分很簡單，直接就是：

js部分代碼如下：

$('#magicsuggest').magicSuggest({
　　placeholder:''，
　　allowFreeEntries: false,
　　maxSelection:1,
　　autoSelect:true,
　　valueField:"id",
　　displayField:"value",
　　resultAsString:true,
　　selectionStacked: true,
　　highlight:false,
　　data: ['Paris', 'New York', 'Gotham']
});

優(yōu)點：不會出現(xiàn)層疊性沖突的問題；樣式美觀；允許多項選擇

缺點：多余的樣式較多（陰影、高亮、錯誤提示、多選），需要根據(jù)具體需要調整樣式；不能直接通過$(this).val()來獲取原輸入框的值；數(shù)據(jù)量過大時加載會出現(xiàn)延遲

4.鑒于上面那個插件默認的是多選的樣式，用到項目里也不能直接獲取<select>標簽里的值，這里我個人推薦chosen這款插件（需要同時引入chosen.css和chosen.js），html部分代碼如下：

<select data-placeholder="Type 'C' to view" style="width:100%" class="myselect chosen-select-no-results" tabindex="10">
 <option value=""></option>
 <option>American Black Bear</option>
 <option>Asiatic Black Bear</option>
 <option>Brown Bear</option>
 <option>Giant Panda</option>
 <option>Sloth Bear</option>
 <option>Sun Bear</option>
 <option>Polar Bear</option>
 <option>Spectacled Bear</option>
</select>

js部分代碼如下：

var config = {
　　'.chosen-select':{},
　　'.chosen-select-deselect':{allow_single_deselect:true},
　　'.chosen-select-no-single':{disable_search_threshold:10},
　　'.chosen-select-no-results':{no_results_text:'Oops, nothing found!'},
　　'.chosen-select-width':{width:"95%"}
}
for (var selector in config) {
　　$(selector).chosen(config[selector]);
}

注意：如果與bootstrap的Modal模態(tài)框結合使用時，會出現(xiàn)下拉列表顯示不出來，同時.modal-body右側出現(xiàn)滾動條，原因就在于bootstrap給.modal-body設置了一個overflow-y:auto的默認樣式，所以解決辦法就是給.modal-body添加一個overflow-y:visible的樣式來覆蓋它。

5.當然，實現(xiàn)相同功能的jQuery插件還有很多，具體可以參考http://www.cnblogs.com/lhb25/p/form-enhanced-with-javascript-three.html

如果大家還想深入學習，可以點擊jquery下拉框效果匯總、JavaScript下拉框效果匯總進行學習。

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: