浅谈select2的使用

前言

select2相比较以往的select下拉框比起来，确实非常方便，它提供了一个可自定义的选择框，支持搜索，标记，远程数据集，无限滚动以及许多其他高度使用的选项。

select2的安装详情请看官方文档介绍的配置方式：https://select2.org/getting-started/installation

支持的类型

传统的 <select> 框中包含任意数量的<option>元素。其中每个都在下拉菜单中呈现为一个选项。Select2在其上初始化时保留此行为<select>包含的元素 <option> 元素，将它们转换为内部JSON表示：

{"id": "value attribute" || "option text","text": "label attribute" || "option text","element": HTMLOptionElement
}

关于分层

每个HTML规范只允许一个级别的嵌套。如果你<optgroup> 在又建立一个 <optgroup>，Select2将无法检测到额外的嵌套级别，因此可能会触发错误。

此外， <optgroup>元素不能被选择。这是HTML规范的限制，并不是Select2可以克服的限制。

如果您希望创建可选选项的真实层次结构，请使用 <option> 而不是 <optgroup>并使用CSS更改样式。请注意，这种方法可能被认为是“不太容易访问”，因为它依赖于CSS样式，而不是语义<optgroup>，以产生效果。

Select2数据格式

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       }
}

注：

如果您想使用“无限滚动”功能， //响应对象还可能包含分页数据。需要指定pagination键。
提供 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 identifierobj.text = obj.text || obj.name; // replace name with the property used for the textreturn 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将显示容器上方的下拉列表，但上面有足够的空间。

可清除的全部已选择的option

$('select').select2({placeholder: 'This is my placeholder',allowClear: true
});

设置true为时，如果选择了值，则会在选择框中显示清除按钮（“x”图标）。单击清除按钮将清除所选值，有效地将选择框重置回其占位符值。

自动标记到标签中

$(".js-example-tokenizer").select2({tags: true,tokenSeparators: [',', ' ']
})

Select2支持在用户键入搜索字段时自动添加选项的功能。尝试在下面的搜索字段中输入并输入空格或逗号。

单选选择占位符(无非就是默认值)

<select class="js-example-placeholder-single js-states form-control"><option></option>
</select>

默认尝试选择第一个选项。如果您的第一个选项非空，浏览器将显示此选项而不是占位符。

多选占位符

$('select').select2({placeholder: {id: '-1', // the value of the optiontext: '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');