表單元素讓人愛恨交加。作為網頁最重要的組成部分，表單幾乎無處不在，從簡單的郵件訂閱、登陸注冊到復雜的需要多頁填寫的信息提交功能，表單都讓開發者花費了大量的時間和精力去處理，以期實現好用又漂亮的表單功能。這篇文章分享幾款很棒的 JavaScript 下拉列表功能增強插件。
您可能感興趣的相關文章
Selectize 是一個基於 jQuery 的 <select> UI 控件，對於標簽選擇和下拉列表功能非常有用。
Selectize 的目標是通過簡單而強大的 API 提供堅實可用的用戶體驗。
主要特色：
- 簡潔的 API，有詳細的幫助文檔；
- 支持智能排序和多屬性搜索，甚至可以使用打分函數進行排序的；
- 支持鍵盤操作，對用戶使用友好；
- 支持同時選擇和刪除多個項目；
- 支持遠程數據加載，例如 Ajax 調用；
使用示例：
單選選擇
$('#select-beast').selectize({
create: true,
sortField: 'text'
});
多項選擇
$('#select-state').selectize({
maxItems: 3
});
FancySelect 這款插件是 Web 開發中下拉框功能的一個更好的選擇。
FancySelect 使用方便，只要綁定頁面上的任何 Select 元素，並調用就 .fancySelect() 就可以了。
默認情況下，FancySelect 在移動設備上使用原生的選擇功能和風格。
使用示例：
<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 可以幫助你輕松構建用戶友好的漂亮選擇功能，可以把多選轉換為基於標簽的輸入域。
特色功能：
- 用戶友好的下拉選擇功能，支持搜索；
- 基於標簽的多項選擇功能；
- 支持設置選中和無效選項；
- 支持修改和更新事件；
使用示例：
隱藏搜索的單選功能
$(".chosen-select").chosen({disable_search_threshold: 10});
設置多選的最大選擇數
$(".chosen-select").chosen({max_selected_options: 5});
監聽更新事件
$("#form_field").chosen().change( … );
手動觸發更新
$("#form_field").trigger("chosen:updated");
自定義寬度
$(".chosen-select").chosen({width: "95%"});
DropKick 可以幫助你把已有的煩人的 <select> 列表轉換為漂亮的，可定制的下拉菜單。
使用示例：
默認調用
$('.default').dropkick();
自定義更新事件
$('.change').dropkick({
change: function (value, label) {
alert('You picked: ' + label + ':' + value);
}
});
自定義皮膚
$('.custom_theme').dropkick({
theme: 'black',
change: function (value, label) {
$(this).dropkick('theme', value);
}
});
這款免費、輕量的 jQuery 選擇功能插件讓你可以輕松創建帶有圖片和描述的自定義下拉菜單。
使用示例：
使用 JSON 數據
$('#demoBasic').ddslick({
data: ddData,
width: 300,
imagePosition: "left",
selectText: "Select your favorite social network",
onSelected: function (data) {
console.log(data);
}
});
獲取選中項
$('#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);
});
設置選中項
$('#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 是一款用於替代傳統的網頁下拉框的 jQuery 插件，支持搜索、遠程數據和無限滾動等功能。
使用示例：
<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>
您可能感興趣的相關文章