select2相比较以往的select下拉框比起来,确实非常方便,它提供了一个可自定义的选择框,支持搜索,标记,远程数据集,无限滚动以及许多其他高度使用的选项。
select2的安装详情请看官方文档介绍的配置方式:https://select2.org/getting-started/installation
传统的
{
"id": "value attribute" || "option text",
"text": "label attribute" || "option text",
"element": HTMLOptionElement
}
每个HTML规范只允许一个级别的嵌套。如果你 在又建立一个
,Select2将无法检测到额外的嵌套级别,因此可能会触发错误。
此外, 元素不能被选择。这是HTML规范的限制,并不是Select2可以克服的限制。
如果您希望创建可选选项的真实层次结构,请使用
而不是 并使用CSS更改样式。请注意,这种方法可能被认为是“不太容易访问”,因为它依赖于CSS样式,而不是语义
,以产生效果。
Select2可以从数组或远程数据源(AJAX)以编程方式提供的数据作为下拉选项。为了实现这一目标,Select2需要一种非常具体的数据格式。此格式由一个JSON对象组成,该对象包含由键控的对象数组result键。
{
"results": [
{
"id": 1,
"text": "Option 1"
},
{
"id": 2,
"text": "Option 2",
"selected": true
},
{
"id": 3,
"text": "Option 3",
"disabled": true
}
],
"pagination": {
"more": true
}
}
注:
selected
和 disabled
此数据结构中的选项的属性 默认为不选中,true为选中由于一般select数据可能会来源与后台,但Select2要求该id,text
属性用于唯一标识结果列表中显示的选项。如果使用id
(类似pk
)以外的属性来唯一标识选项,则需要将旧属性映射到id,text
将其传递给Select2之前。如果您无法在服务器上执行此操作,或者您处于无法更改API的情况,则可以在将其传递给Select2之前在JavaScript中执行此操作:
var data = $.map(yourArrayData, function (obj) {
obj.id = obj.id || obj.pk; // replace pk with your identifier
obj.text = obj.text || obj.name; // replace name with the property used for the text
return obj;
});
注:不允许使用空格id
或id
值0
{
"results": [
{
"text": "Group 1",
"children" : [
{
"id": 1,
"text": "Option 1.1"
},
{
"id": 2,
"text": "Option 1.2"
}
]
},
{
"text": "Group 2",
"children" : [
{
"id": 3,
"text": "Option 2.1"
},
{
"id": 4,
"text": "Option 2.2"
}
]
}
],
"pagination": {
"more": true
}
}
注:在创建嵌套选项时,仅支持单级嵌套。不保证在所有浏览器和设备上正确显示任何其他嵌套级别。
var data = [
{
id: 0,
text: 'enhancement'
},
{
id: 1,
text: 'bug'
},
{
id: 2,
text: 'duplicate'
},
{
id: 3,
text: 'invalid'
},
{
id: 4,
text: 'wontfix'
}
];
$(".js-example-data-array").select2({
data: data
})
$(".js-example-data-array-selected").select2({
data: data
})
$('#mySelect2').select2({
closeOnSelect: false
});
$('#mySelect2').select2({
dropdownParent: $('#myModal')
});
默认情况下,Select2会将下拉列表附加到正文的末尾,并将其绝对定位到选择容器的上方或下方。
如果容器下方没有足够的空间,Select2将显示容器上方的下拉列表,但上面有足够的空间。
$('select').select2({
placeholder: 'This is my placeholder',
allowClear: true
});
设置true
为时,如果选择了值,则会在选择框中显示清除按钮(“x”图标)。单击清除按钮将清除所选值,有效地将选择框重置回其占位符值。
$(".js-example-tokenizer").select2({
tags: true,
tokenSeparators: [',', ' ']
})
Select2支持在用户键入搜索字段时自动添加选项的功能。尝试在下面的搜索字段中输入并输入空格或逗号。
默认尝试选择第一个选项。如果您的第一个选项非空,浏览器将显示此选项而不是占位符。
$('select').select2({
placeholder: {
id: '-1', // the value of the option
text: 'Select an option'
}
});
当用户在select2上执行不同操作时,select2会触发不同的事件,用户能够监听这些事件,并且添加相应的处理。
用户也可以通过.trigger来手动触发这些事件。
事件 | 描述 |
---|---|
change |
选择或删除选项时触发。 |
change.select2 |
Scoped版本 change 。请参阅下文了解更多详情。 |
select2:closing |
在下拉列表关闭之前触发。可以防止此事件。 |
select2:close |
每当下拉菜单关闭时触发。 select2:closing 在此之前被解雇并且可以被阻止。 |
select2:opening |
在下拉列表打开之前触发。可以防止此事件。 |
select2:open |
每次下拉打开时触发。 select2:opening 在此之前被解雇并且可以被阻止。 |
select2:selecting |
在选择结果之前触发。可以防止此事件。 |
select2:select |
选择结果时触发。 select2:selecting 在此之前被解雇并且可以被阻止。 |
select2:unselecting |
在删除选择之前触发。可以防止此事件。 |
select2:unselect |
删除选择时触发。 select2:unselecting 在此之前被解雇并且可以被阻止。 |
select2:clearing |
在清除所有选择之前触发。可以防止此事件。 |
select2:clear |
清除所有选择时触发。 select2:clearing 在此之前被解雇并且可以被阻止。 |
方法1:
$('#mySelect2').select2('data');
返回一个js对象数组,包括选中项的所有properties/values。
方法2:
$('#mySelect2').find(':selected');