jQuery插件使用总结一：select2

一、select2介绍

Select2是一款基于JQuery的下拉列表插件，主要用来优化select，支持单选和多选，同时也支持分组显示、列表检索。官网地址为：https://select2.org

二、下载select2

select2可以从CDN上引用，也可以使用Bower安装，也可以手动安装。本人主要使用的是手动安装的方式，下载地址如下： https://github.com/select2/select2

下载后的文件我们只需要将dist文件夹中的css和js引入我们的项目中就可以正常使用了。

三、引用

首先将刚才下载下来的css和js都引入到项目中，在引入select2.js之前我们需要先引入jquery。
注意，下载下来的select2文件夹中的css和js都有压缩版的和未压缩版的，可以根据自己的需要自行引入，这里引入的是压缩版的。

四、调用

在调用之前我们需要先准备一个select标签，并给它一个id，方便接下来的操作。

<select name="" id="myselect" >
    <option value="">111111</option>
    <option value="">777777</option>
    <option value="">666666</option>
    <option value="">555555</option>
    <option value="">444444</option>
    <option value="">333333</option>
    <option value="">222222</option>
</select>

然后通过select的id调用插件：

$(function () {

        $("#myselect").select2();//调用插件
        
})

效果图如下：

当然，我们需要给它做一些配置，这些配置通过对象的方式作为“ $("#myselect").select2() ” 中select2() 的参数，例如，我们可以设置select的宽度width：

$("#myselect").select2({

      width:160,//设置select标签的宽度
            
});

效果图如下：

我们还可以通过配置给select添加新的选项：

$("#myselect").select2({
            width:160,//设置select标签的宽度
            //给select添加新的选项
            data:[
                {id:"1", text:"一"},
                {id:"2", text:"二"},
                {id:"3", text:"三"},
                {id:"4", text:"四"},
                {id:"5", text:"五"},
            ]
        });

效果图如下：

当然，select的数据也可以通过ajax远程请求来得到。
html：

select name="" id="myselectAjax" ></select>

js代码：

		$('#myselectAjax').select2({
            width:160,//设置select标签的宽度
            ajax: {
                url: 'word.php',
                dataType: 'json',
                //回调函数
                processResults: function (data) {
                    //处理相应结果
                    var resultList = [];
                    //便利data，并将数据存入到数组resultList中
                    $.each(data,function (index,item) {
                        resultList.push({
                            id:item.id,text:item.name
                        })
                    });

                    //返回结果
                    return {
                        results: resultList
                    };
                }
            }
        });

其中，ajax请求的url是我自己准备的一个文件word.php，其内容为：

[{"id":"1","name":"Tom"},
    {"id":"2","name":"Jack"},
    {"id":"3","name":"Rose"},
    {"id":"4","name":"Bill"},
    {"id":"5","name":"Bob"},
    {"id":"6","name":"Lisa"},
    {"id":"7","name":"Linda"},
    {"id":"8","name":"Timor"}]

就是一个简单的数组，数组的每一项都是一个包含id，name的对象。我们先通过ajax请求文件，然后对数据进行处理，将数据存放到数组resultList中，然后返回该数组。
效果如下：

select2还有很多其他的配置选项：

详细请参考select2的官网：https://select2.org