jquery.select2 基于 jQuery 的下拉列表美化插件

优化后案例

<select class="form-control" id="id_select2_demo1"></select>

$('#id_select2_demo1').select2({
        language: "<?php echo empty($language)?'zh-CN':$language; ?>" ,
        ajax: {
            url: "<?php echo ymmAdminUrl('ajax/customers'); ?>",
            dataType: 'json',
            processResults: function (result) {
                var data = $.map(result, function (obj) {
                    obj.id = obj.id || obj.pk;
                    obj.text = obj.text || obj.name;
                    return obj;
                });
                return {
                    results: data
                };
            },
        },
        placeholder: '请选择',
        minimumInputLength: 1,
        allowClear: true,
});

注：language 对应中文写法是“zh-CN”，如需改为“zh-cn”，请添加一下写法

$.fn.select2.amd.define(‘select2/i18n/zh-cn’, [], function () {
return $.fn.select2.amd.require(‘select2/i18n/zh-CN’);
});

常用配置

设置提示语 placeholder

$('#id_select2_demo1').select2({placeholder: '请选择'});
# 需要注意，要想让这个提示语生效，需要 select 的 option 里边有一个 value 为空的 
<select class="form-control" id="id_select2_demo1">
<option value="">请选择</option>
<option value="1">item1</option>
</select>

隐藏搜索框

var selectorx = $('#demo').select2({minimumResultsForSearch: -1});

加载远程数据

$('#demo').select2({    
  placeholder: 'Ajax后端获取数据示例',    
  ajax: {      
    url: "sdata.json",      
    dataType: 'json',      
    delay: 250,      
    data: function (params) {        
      return {search: params.term, custom1:'hello'};     
    },      
    processResults: function (data) {        
      return {results: data};      
    },      
    cache: true    
  },    
  minimumInputLength: 2
});

• delay: 250： 配置告诉select2在用户停止输入多少毫秒后开始查询，合理设置可以避免频繁向后端发送请求
• search: params.term： 定义了要传递给后端的查询参数，search 为发送到服务端的参数名，params.term 表示输入框中输入的内容，当然这里也可以添加一些自定义的参数
• results: data： 定义了后台返回的数据，其中 data 为select2能够识别的格式
• minimumInputLength： 输入指定长度的字符后开始搜索,0.点击即显示所有 option

多选支持

默认的 Select 标签一样只需要在 Select 标签中添加 multiple="multiple"

<select class="form-control" multiple="multiple"> ...</select>

• allowClear： 是否显示清楚按钮，默认 false，如果设置为 true，需要同时配置 placeholder，否则可能会引起js报错：

TypeError: Cannot read property 'id' of undefined

• maximumSelectionLength： 配置最多能选择多少项
• width： 宽度，例如 100%
• multiple： 是否支持多选，默认 false
• closeOnSelect： 是否选中后关闭选择框，默认 true
• tags： 是否可以动态创建选项
• disabled： 是否禁用
• debug： 是否开启 debug 模式

获取已选择的值

无论是单选还是多选都可以用下边的代码来获取选择的option

$('#demo').select2('val')

获取已选择的对象

$("#demo").select2("data")

拿到已选择option的text值

可以通过如下方法，以下代码中的 [0] 用来获取第一个对象，对单选合适，如果是多选的话需要循环获取

$("#demo").select2("data")[0].text

selected，初始化值，设置选中项

# 单选情况下val为数字，这里的selectx为$("#demo").val(2).trigger("change");

selected，初始化值，设置选中项（多选情况下 val 为列表）

$("#demo").val([2,3,5]).trigger("change");

清空已选择的值

无论是单选还是多选都可以这样清除

$(“#demo”).val(null).trigger(‘change’);
$(“#id_select2_demo4”).val(null).trigger(‘change’);

禁用select2

$("#demo").prop('disabled',true);

动态添加 select 的 option

$('#add').click(function() {    
var _html = '<option value="9" selected>select2.github.io/select2/</option>';    
$('#id_select2_demo1').append(_html).trigger('change.select2');   
$('#id_select2_demo1').select2("open");
})

• change.select2： 新增 Select 数据后触发 Select2 更新
• .select2(“open”)： 打开 Select，open 改为 close 可动态关闭 Select，改为 destroy 可销毁 Select2，恢复 Select 默认样式