Select2.js 下拉框使用小结：从初始化到高级配置

Select2.js 插件概述与引入

使用 Select2 插件已有时日，现对常用功能进行梳理。尽管早期体验中认为其并非最优解，但在同类下拉框插件中，目前尚未发现更佳的替代方案。

Select2 主要存在两个版本，新版引入了新特性并更新了方法参数，视觉效果优于初版。本文内容基于较新的版本进行说明。

官方文档地址：http://select2.github.io/

功能演示如下：

受限于博客系统的展示环境，此处仅演示基础功能。

一、文件引入：需加载 select2.full.js 与 select2.min.css（适用于 4.0.1 版本），同时依赖 jquery 1.8.3 或更高版本。

若引用的 jQuery 版本过低，Select2 的部分功能可能无法正常运行，例如清除选项功能（allowClear: true）。

新版推荐使用 <select></select> 标签。对于本地数据，可以使用 input 标签，但涉及 Ajax 远程数据时，必须使用 select 标签。

占位符与本地数据加载

二、占位符（placeholder）设置

placeholder 用于显示占位提示文字。若需启用清除功能（allowClear），则必须设置 placeholder。

三、加载本地数据

Select2 默认的数据属性为 id 和 text，新版支持自定义，但建议沿用默认属性。因此，提供的 JSON 数据最好转换为包含 id 和 text 的形式，也可添加其他自定义属性。

var data = [{ id: 0, text: 'enhancement' }, { id: 1, text: 'bug' }, { id: 2, text: 'duplicate' }, { id: 3, text: 'invalid' }, { id: 4, text: 'wontfix' }];
$("#c01-select").select2({
 data: data,
 placeholder:'请选择',
 allowClear:true
})

远程数据加载配置详解

四、加载远程数据

$("#c01-select").select2({
 ajax: {
 url: "data.json",
 dataType: 'json',
 delay: 250,
 data: function (params) {
 return {
 q: params.term,
 };
 },
 processResults: function (data) {
 return {
 results: data
 };
 },
 cache: true
 },
 escapeMarkup: function (markup) { return markup; }, 
 minimumInputLength: 1,
 templateResult: formatRepo, 
 templateSelection: formatRepoSelection 
});

配置说明如下：

1. q: params.term 表示查询参数，即输入框中的内容，q 为发送至服务器的参数名。此处可添加自定义参数，例如：stype:'person'。

2. processResults 中 results: data 用于返回数据。将最终数据返回给 results，若服务器返回的数据位于 data.res 下，则需返回 data.res。具体处理需根据服务器返回的 JSON 格式调整。

3. minimumInputLength 设置最小输入字符数以触发查询，相关参数 maximumSelectionLength 表示最大输入限制。

4. escapeMarkup 用于字符转义处理。

5. templateResult 为返回结果回调函数，例如 function formatRepo(repo){return repo.text}，可将返回结果的 text 显示在下拉框中，也可自定义返回内容如 repo.text+"1"。

6. templateSelection 为选中项回调函数，例如 function formatRepoSelection(repo){return repo.text}。

7. 关于返回的 JSON 格式：Select2 默认要求格式为 [{id:1,text:'text'},{id:2,text:'text'}]，新版对此格式要求严格，但允许添加额外列，如：[{id:1,text:'text',name:'liu'}]。

选中项获取与多选操作

五、获取选中项

var res=$("#c01-select").select2("data")[0] ; //单选
var reslist=$("#c01-select").select2("data"); //多选
if(res==undefined)
{
 alert("你没有选中任何项");
}
if(reslist.length)
{
 alert("你选中任何项");
}

六、清空选择项及设置不可用状态

//清空选择
$("#c01-select").val(null).trigger("change");
$("#c01-select").val("你的placeholder").trigger("change");//或者
//如果你使用的是input标签（默认就是本地数据），你可以用$("#c01-select").val('');来清空选项
//disabled
$("#c01-select").prop("disabled", false);//可用
$("#c01-select").prop("disabled", true);//不可用

七、启用多选功能

$("#c01-select").select2({
 data:data,
 multiple: true
});

多选功能演示如下：

新旧版本功能对比

八、新版与老版主要差异对比

1. 回调函数名称变更：老版为 formatResult、formatSelection；新版改为 templateResult、templateSelection。

2. 初始化方式：

//老版，注意如果初始化时文本框中本身没有值（为空），则不会触发该方法
initSelection: function (element, callback) {
 var id = $(element).val();
 var data = { id: id, text: id};//这里是初始化的数据，你可以通过id来从服务器上获取（ajax），再装载进去
 callback(data);
}

//新版，直接给select添加option
$("#id").append(new Option("Jquery", 10001, false, true));
//或者
$("#id").append("<option value='10001'>Jquery</option>");

3. 获取或设置值：老版使用 select2("val")；新版使用 $("select").val()。

推荐使用新版方式。

var res = $("#id").select2("data");
//返回数组，单选就取res[0]；好处是不进可以获取id、text还可以获取其他属性，如res[0].names

4. 停用或启用：老版使用 $("select").enable(false)；新版使用 $("select").prop("disabled", true)。

5. 主题样式：新版已更新样式，若需使用老版样式，可设置 theme: "classic"。

若需深入学习，可参考 jquery 下拉框效果汇总及 JavaScript 下拉框效果汇总。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。