Selectize.jsjavascript
Selectize 是一个基于 jQuery 的 <select> UI 控件，对于标签选择和下拉列表功能很是有用。css
Selectize 的目标是经过简单而强大的 API 提供坚实可用的用户体验。html
主要特点：java
- 简洁的 API，有详细的帮助文档；
- 支持智能排序和多属性搜索，甚至可使用打分函数进行排序的；
- 支持键盘操做，对用户使用友好；
- 支持同时选择和删除多个项目；
- 支持远程数据加载，例如 Ajax 调用；
使用示例：git
单选选择github
|
1
2
3
4
|
$(
'#select-beast'
).selectize({
create:
true
,
sortField:
'text'
});
|
多项选择函数
|
1
2
3
|
$(
'#select-state'
).selectize({
maxItems: 3
});
|
FancySelectthis
FancySelect 这款插件是 Web 开发中下拉框功能的一个更好的选择。spa
FancySelect 使用方便，只要绑定页面上的任何 Select 元素，并调用就 .fancySelect() 就能够了。
默认状况下，FancySelect 在移动设备上使用原生的选择功能和风格。
使用示例：
|
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 能够帮助你轻松构建用户友好的漂亮选择功能，能够把多选转换为基于标签的输入域。
特点功能：
- 用户友好的下拉选择功能，支持搜索；
- 基于标签的多项选择功能；
- 支持设置选中和无效选项；
- 支持修改和更新事件；
使用示例：
隐藏搜索的单选功能
|
1
|
$(
".chosen-select"
).chosen({disable_search_threshold: 10});
|
设置多选的最大选择数
|
1
|
$(
".chosen-select"
).chosen({max_selected_options: 5});
|
监听更新事件
|
1
|
$(
"#form_field"
).chosen().change( … );
|
手动触发更新
|
1
|
$(
"#form_field"
).trigger(
"chosen:updated"
);
|
自定义宽度
|
1
|
$(
".chosen-select"
).chosen({width:
"95%"
});
|
DropKick 能够帮助你把已有的烦人的 <select> 列表转换为漂亮的，可定制的下拉菜单。
使用示例：
默认调用
|
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 选择功能插件让你能够轻松建立带有图片和描述的自定义下拉菜单。
使用示例：
使用 JSON 数据
|
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);
});
|
设置选中项
|
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 是一款用于替代传统的网页下拉框的 jQuery 插件，支持搜索、远程数据和无限滚动等功能。
使用示例：
|
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"
).select
2
(); });
</script>
</head>
<body>
<select id=
"e1"
>
<option value=
"AL"
>Alabama</option>
...
<option value=
"WY"
>Wyoming</option>
</select>
</body>
|