表單元素讓人愛恨交加。作為網(wǎng)頁最重要的組成部分，表單幾乎無處不在，從簡單的郵件訂閱、登陸注冊到復(fù)雜的需要多頁填寫的信息提交功能，表單都讓開發(fā)者花費了大量的時間和精力去處理，以期實現(xiàn)好用又漂亮的表單功能。這篇文章分享幾款很棒的 JavaScript 下拉列表功能增強插件。
Selectize 是一個基于 jQuery 的 <select> UI 控件，對于標(biāo)簽選擇和下拉列表功能非常有用。
Selectize 的目標(biāo)是通過簡單而強大的 API 提供堅實可用的用戶體驗。
主要特色：
使用示例：
單選選擇
1 2 3 4 | $('#select-beast').selectize({ create: true, sortField: 'text'}); |
多項選擇
1 2 3 | $('#select-state').selectize({ maxItems: 3}); |
FancySelect 這款插件是 Web 開發(fā)中下拉框功能的一個更好的選擇。
FancySelect 使用方便，只要綁定頁面上的任何 Select 元素，并調(diào)用就 .fancySelect() 就可以了。
默認情況下，F(xiàn)ancySelect 在移動設(shè)備上使用原生的選擇功能和風(fēng)格。
使用示例：
1 2 3 4 5 6 7 8 9 10 | <select class="basic"> <option value="">Select something…</option> <option>Lorem</option> <option>Ipsum</option> <option>Dolor</option> <option>Sit</option> <option>Amet</option></select>$('.basic').fancySelect(); |
Chosen 是最流行的 jQuery 選擇功能插件，也是我最喜歡，最好用的一個！
Chosen 可以幫助你輕松構(gòu)建用戶友好的漂亮選擇功能，可以把多選轉(zhuǎn)換為基于標(biāo)簽的輸入域。
特色功能：
使用示例：
隱藏搜索的單選功能
1 | $(".chosen-select").chosen({disable_search_threshold: 10}); |
設(shè)置多選的最大選擇數(shù)
1 | $(".chosen-select").chosen({max_selected_options: 5}); |
監(jiān)聽更新事件
1 | $("#form_field").chosen().change( … ); |
手動觸發(fā)更新
1 | $("#form_field").trigger("chosen:updated"); |
自定義寬度
1 | $(".chosen-select").chosen({width: "95%"}); |
DropKick 可以幫助你把已有的煩人的 <select> 列表轉(zhuǎn)換為漂亮的，可定制的下拉菜單。
使用示例：
默認調(diào)用
1 | $('.default').dropkick(); |
自定義更新事件
1 2 3 4 5 | $('.change').dropkick({ change: function (value, label) { alert('You picked: ' + label + ':' + value); }}); |
自定義皮膚
1 2 3 4 5 6 | $('.custom_theme').dropkick({ theme: 'black', change: function (value, label) { $(this).dropkick('theme', value); }}); |
這款免費、輕量的 jQuery 選擇功能插件讓你可以輕松創(chuàng)建帶有圖片和描述的自定義下拉菜單。
使用示例：
使用 JSON 數(shù)據(jù)
1 2 3 4 5 6 7 8 9 | $('#demoBasic').ddslick({ data: ddData, width: 300, imagePosition: "left", selectText: "Select your favorite social network", onSelected: function (data) { console.log(data); }}); |
獲取選中項
1 2 3 4 5 6 7 8 9 | $('#demoShowSelected').ddslick({ data: ddData, selectText: "Select your favorite social network",});$('#showSelectedData').on('click', function () { var ddData = $('#demoShowSelected').data('ddslick'); displaySelectedData("2: Getting Selected Dropdown Data" , ddData);}); |
設(shè)置選中項
1 2 3 4 5 6 7 8 9 10 11 12 | $('#demoSetSelected').ddslick({ data: ddData, selectText: "Select your favorite social network"});$('#btnSetSelected').on('click', function () { var i = $('#setIndex').val(); if(i >= 0 && i <5) $('#demoSetSelected').ddslick('select', {index: i }); else $('#setIndexMsg').effect('highlight',2400);}); |
Select 2 是一款用于替代傳統(tǒng)的網(wǎng)頁下拉框的 jQuery 插件，支持搜索、遠程數(shù)據(jù)和無限滾動等功能。
使用示例：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <head> <link href="select2.css" rel="stylesheet"/> <script src="select2.js"></script> <script> $(document).ready(function() { $("#e1").select2(); }); </script></head><body> <select id="e1"> <option value="AL">Alabama</option> ... <option value="WY">Wyoming</option> </select></body> |
