select2简单用法

select2官方文档以及js下载地址:select2.org

select2的使用第一步当然是引入js啦,这个就不详述啦!
要想select2在页面上运行,首先第一步必须要在页面上添加select的html代码,类似这样:

<select  class="selectClass" name="states[]" style="width: 200px;" tabindex="-1" aria-hidden="true"></select>

添加了页面html之后要想成功运行select2,必须要对它进行初始化:

$('.selectClass').select2({
    placeholder:"初始化select2"
});

这样的初始化仅仅是一个空的下拉框配上placeholder的背景文字而已,接下来要说的就是怎么往上面添加数据啦。
首先要说明的是,在select2的下拉框中会存储两个数值id以及text,id就是下拉选项对应的value值,text就是显示在页面上的下拉框文字。所以我们在给select2添加数据的时候最简单的方法就是构造类似下面这样的对象数组:

let data = [
    {id:1,text:测试1},
    {id:2,text:测试2},
    {id:3,text:测试3}
];

然后就可以将对象数组添加到select2中了:

$('.selectClass').select2({
    data:data
});

到此已经可以实现在页面上展示select的下拉框效果了。很多时候api返回的数据可能是只有id和name字段,这时候就需要构造text字段(新版本的select2可以动态更改text对应的字段,但不建议这么做),可以这样来构造:

let returnData = $.map(data, function (obj) {
    obj.text = obj.name ;
    return obj;
});

然后就需要获取下拉框选择的数据了:

$('.selectClass').select2('val');

就是这么简单就可以获取到对应的数据了。select2另一个很好的用法就是多选。做法也很简单,可以在上面html代码中加上一个属性multiple=”multiple”就可以了,其他的用法与上面的完全一致。顺便提一下,新版的select2多选获取值的时候得到的是一个id(value)数组哦!
下面介绍一下select2的其他一些常用的api:
给下拉框中添加默认值:

单选的时候可以这样用(第二个参数是id值):

$('.selectClass').select2('val','1');

多选的时候:

$(".selectClass").val([1,2,3]).trigger('change');
  • 监控select2选择器:

    $(document).on(‘select2:select’,’.selectClass’,function (event) {
    });
    其中的event参数可以获取到下拉框数据中的所有值,包括原对象数组中除去id和text的值。可以这样来获取:

    let data = event.params.data;
    let type = data.type;

  • 很多时候需要动态更新select框中的值,如果直接赋值的话会发现内容没有刷新,这是因为select2初始化之后不会再重新初始化,这时候就需要对select2的值进行清空再去赋值:

    if($('.selectClass').data('select2')){
    $('.selectClass').select2('destroy').empty();
    }