jQuery 插件：下拉框控件（select2）

官网：https://select2.org/
官网例子：http://select2.github.io/select2/index.html

引入
方法一：离线引用
通过 Select2（GitHub） 下载对应版本的库。
方法二：CDN 引用

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>

有网友提到，要引用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

<!-- 单选：用于 select 控件 -->
<select id="id" name="states" class="select2">
    <option value="" selected>请选择区域</option>
    <option value="1">珠海</option>
    <option value="2">深圳</option>
    <option value="3">澳门</option>
    <option value="4">香港</option>
</select>

<!-- 多选：在 select控件上添加属性 multiple 或 multiple="multiple" -->
<select class="js-example-basic-multiple" name="states" multiple="multiple">
  <option value="AL">Alabama</option>
    ...
  <option value="WY">Wyoming</option>
</select>

初始化

// 页面加载完成后初始化select2控件  
$(function () {  
    // 初始化select2控件
    $("#area").select2();

    // select2()函数可添加相应配置
    $('#area').select2({  
        placeholder: '请选择区域',
        allowClear: true, // 允许清除，选择选项后右侧会多个删除标记，点击可删除选项
        data: data,// select 源数据
        ajax: {}, // 远程加载数据
        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;  
        }
    });

    // 事件：https://select2.org/programmatic-control/events
    // 若 select2:close 无法使用时，试试 select2-close 
}); 

更多参数参考 select2 使用笔记

取值、设值

// 取值：4.0 以下
$("#id").select2('val');
// 设值：4.0 以下
$("#id").select2('val', '1');

// 取值：4.0（二选一）
$("#id").val(); // 取值
$("#id").select2("data"); // 取值推荐：返回数组，单选就取res[0]。好处是不仅可以取id、text，还可以取其他属性，如res[0].names
// 设值：4.0
$("#id").val('1').trigger("change"); // 单选设置默认值1（官方建议书写方式）
$("#id").val([1,2]).trigger("change"); // 多选设置默认值1和2
$("#id").val('1').change(); // 这样写也可以行，但非官方建议的书写方式

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

添加 option

// 4.0 版本（二选一）
$("#id").append(new Option("Jquery", 10001, false, true));
$("#id").append("<option value='10001'>Jquery</option>");

清空 option

// 操作select标签：4.0 版本（二选一）
$("#id").val(null).trigger("change");
$("#id").val("你的placeholder").trigger("change");

// 操作input标签：4.0 版本（二选一）
$("#id").select2("destroy");
$("#id").val('');

停用或启用

// 4.0 以下
$("select").enable(false);
$("select").enable(true);

// 4.0 用 disabled 实现
$("#id").prop("disabled", false);
$("#id").prop("disabled", true);

下面简单说明新版(4.0)与老版差别(还是以官网为准)

// 结果回调和选中回调名称
formatResult、formatSelection（老版）
templateResult、templateSelection（新版）

// 初始化
initSelection（老版）
dataAdapter（新版）

绑定切换事件

// 不要使用change事件，会影响select2值回显
$("#selData").on("select2:select",function(){
    var data = $(this).val();
    alert(data);
});