引入

方法一：离线引用

通过 Select2(GitHub) 下载对应版本的库。

方法二：CDN 引用

有网友提到，要引用jquery.1.8.3及以上版本。否则部分功能无法正常使用。比如：清除功能allowClear: true

简介

select2 插件给我们带来了更加友好的交互方式。

支持关键字检索下拉框值；

样式美观；

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 查询参数(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显示到下拉框里，当然你可以return repo.text+”1”;等
6.templateSelection选中项回调function formatRepoSelection(repo){return repo.text}
7.关于返回的 json的格式：select2默认json格式为[{id:1,text:’text’},{id:2,text:’text’}]，新版严格要求这样的格式，当然你可以添加列，如：[{id:1,text:’text’,name:’liu’}]

使用

html

区域：

请选择区域

珠海

深圳

澳门

香港

Alabama
...
Wyoming
JavaScript
// 页面加载完成后初始化select2控件
$(function () {
// 初始化select2控件
$("#area").select2();
// select2()函数可添加相应配置
$('#area').select2({
placeholder: '请选择区域',
allowClear: true, // 允许清除，选择选项后右侧会多个删除标记，点击可删除选项
data: data,// 数据
multiple: true, // 多选
theme: "classic", // 旧版主题样式，新版样式已更新
maximumInputLength: 20, // 允许搜索长度
minimumResultsForSearch: 20, // 至少20个结果的时候才显示搜索框
minimumResultsForSearch: "Infinity", // 永久隐藏搜索框
selectOnClose: true, // 结果显示高亮
closeOnSelect: false, // select选中关闭下拉框
selectableOptgroup: true,
tags: true, // 根据搜索框创建option
dropdownParent: $('#my_amazing_modal'), // 选择元素追加到下拉框
separator: ",", // 分隔符
templateResult: function (data) {
if (data.id === '') { // adjust for custom placeholder values
return 'Custom styled placeholder text';
}
return data.text;
}
});
// 直接给select添加option
$("#id").append(new Option("Jquery", 10001, false, true));
// 或者
$("#id").append("Jquery");
// 选中控件id="area"、value="1"的元素
var areaObj = $("#area").select2();
areaObj.val('1').trigger("change"); // 官方建议书写方式
areaObj.val('1').change(); // 这样写也可以行，但还是建议使用官方给的书写方式
$("#area").select2('val','1'); // 旧版
// 获取值：默认是获取当前控件选中元素对应的value值
var areaSelect2 = $("#area").val(); // 新版
var areaSelect2 = $("#area").select2('val'); // 旧版
// 推荐使用：返回数组，单选就取res[0]；好处是不仅可以获取id、text还可以获取其他属性，如res[0].names
var res = $("#id").select2("data");
// 获取选中项
var res = $("#id").select2("data")[0]; //单选
if (res==undefined) {
alert("你没有选中任何项");
}
var reslist = $("#id").select2("data"); //多选
if (reslist.length) {
alert("你选中任何项");
}
// 清空选择项(select标签)
$("#id").val(null).trigger("change");
$("#id").val("你的placeholder").trigger("change");
// 清空选择项(input标签)
$("#id").select2("destroy");
$("#id").val('');
// 停用或启用
$("#id").prop("disabled", false); // 可用(新版)
$("#id").prop("disabled", true); // 不可用(新版)
$("#id").enable(true); // 可用(旧版)
$("#id").enable(false); // 不可用(旧版)
// 事件：https://select2.org/programmatic-control/events
// 若 select2:close 无法使用时，试试 select2-close
});