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

Myth丶恋晨 2022-05-28 03:38 1081阅读 0赞

官网：[https://select2.org/][https_select2.org]  
官网例子：[http://select2.github.io/select2/index.html][http_select2.github.io_select2_index.html]

引入  
方法一：离线引用  
通过 [Select2（GitHub）][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

<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 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 使用笔记][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);
    });

[https_select2.org]: https://select2.org/
[http_select2.github.io_select2_index.html]: http://select2.github.io/select2/index.html
[Select2_GitHub]: https://github.com/select2/select2/tags
[select2]: https://blog.csdn.net/u014388408/article/details/50587405