使用select2插件实现select选择框的一些经常使用功能

在这以前对于select下拉框我使用bootstrap-select插件来处理select下拉选择框：https://www.wj0511.com/site/detail.html?id=224

可是如今咱们公司使用的是select2插件来处理select选择框，这里我就来简单的介绍下select2插件的简单使用

一：下载select2

select2的github地址：https://github.com/select2/select2

select2的官方文档地址：https://select2.org/

访问github进行下载select2插件

二：简单使用select2

1：引入jquery和select2

<!--引入jquery和select2相关js-->  
<script src="./js/jquery.min.js"></script>  
<script src="./select2/js/select2.min.js"></script>  
<script src="./select2/js/i18n/zh-CN.js"></script>  
<!--引入select2的css-->  
<link href="./select2/css/select2.min.css" rel="stylesheet">

2：html

(1)单选

<select class="select-status" name="select-status">  
    <option value="0">待审核</option>  
    <option value="1">审核经过</option>  
    <option value="2">审核驳回</option>  
</select>

(2)多选

<select class="select-status" name="select-status[]" multiple="multiple">  
    <option value="0">数学</option>  
    <option value="1">语文</option>  
    <option value="2">英语</option>  
    <option value="3">体育</option>  
    <option value="4">音乐</option>  
    <option value="5">物理</option>  
</select>

3：js

<script>  
    $(document).ready(function() {  
        $('.select-status').select2({});  
    });  
</script>

如上的过程就是简单的使用select2插件，select2方法有不少经常使用的参数，下面介绍几种查用的参数

1：language：用于select的提示语言，默认为英文

$('.select-status').select2({  
    language: 'zh-CN',//用于指定select2提示语为中文  
});

2：placeholder：用户指定select框的提示符,select框没有选择时的提示信息

$('.select-status').select2({  
    placeholder: '请选择',  
});

3：width：设置select框的宽度

$('.select-status').select2({  
    width: '400px',  
});

4：maximumSelectionLength：最大能够选择的个数,用户select的多选配置,默认为0，表示能够选择任意个数

$('.select-status').select2({  
    maximumSelectionLength: 2,  
});

5：maximumInputLength：select搜索时最多能够提过的搜索字符数,默认为0，表示能够提供任意数量的字符用于搜索

$('.select-status').select2({  
    maximumInputLength: 2,  
});

6：minimumInputLength：select搜索时至少提供指定字符数用于检索，及若是小于指定字符数不会进行检索,默认为0，表示只要提供检索字符就开始进行搜索

$('.select-status').select2({  
    minimumInputLength: 2,  
});

7：multiple：表示是否将select设置为多选，默认为false，表示不进行设置，及若是你想要将一个单选的下拉框这是为多选的话，你能够将multiple设置为true

8：closeOnSelect：表示在select框进行选择时，是否关闭选择下拉，默认为true，表示选择后关闭下拉

$('.select-status').select2({  
    closeOnSelect: false,  
});

9：debug：表示是否开启调试模式，默认为false，不开启调试模式

$('.select-status').select2({  
    debug: true,  
});

10：disabled：表示下拉选择是否禁止选择，默认为fasle，表示能够选择下拉项，为true时选择项被禁用不可选择

$('.select-status').select2({  
    disabled: true,  
});

11：data:是一个数组对象，当html中的select中没有option时，设置data参数能够从data参数中设置下拉选项

var data = [  
    {  
        id: 0,  
        text: '选项一'  
    },  
    {  
        id: 1,  
        text: '选项二'  
    },  
    {  
        id: 2,  
        text: '选项三',  
        disabled:true  
    },  
    {  
        text: '父级选项',  
        children:[  
            {  
                id: 3,  
                text: '子级选项一'  
            },  
            {  
                id: 4,  
                text: '子级选项二'  
            },  
        ]  
    },  
];  
$('.select-status').select2({  
    data: data,  
});

id：表示option的value值

text：表示option的显示值

disabled：为true时表示禁止选择

children：表示选择框有子父级关系

生成的select现象以下：

(1)单选框现象：

多选框现象：

12：ajax：表示使用ajax来实现渲染下拉框的选项

ajax的经常使用参数有：

url：获取选项下拉选项数据的接口地址

dataType：数据类型

delay：请求数据等待时长

data：向接口传递的参数

processResults：获取接口数据，将接口数据渲染到下拉选项中

cache：是否开启缓存

简单实例以下：

(1)：无分页的下拉选择

这里以接口返回的数据以下为例：

{  
    "result": [  
        {  
            "value": 1,//对应id  
            "name": "选项1"//对应text  
        },  
        {  
            "value": 2,  
            "name": "选项2"  
        },  
        {  
            "value": 3,  
            "name": "选项3"  
        }  
    ],  
    "total\_count": 3  
}

这时候使用ajax来渲染下拉选择以下：

$('.select-status').select2({  
    ajax: {  
        url: '/index.php?r=select/search',//接口地址  
        dataType: 'json',  
        delay: 250,  
        data: function (params) {  
            return {  
                keyword: params.term, // 搜索条件,表示你在下拉搜索时输入的参数  
            }  
        },  
        processResults: function (json, params) {  
            data = json.result  
            //将接口返回的参数进行赋值  
            data = $.map(data, function (obj) {  
                obj.id = obj.value;  
                obj.text = obj.name;  
                return obj;  
            });  
            return {  
                results: data,  
            };  
        },  
        cache: true  
    },  
});

(1)：分页的下拉选择

$('.select-status').select2({  
    width:'400px',  
    ajax: {  
        url: '/index.php?r=select/search',//接口地址  
        dataType: 'json',  
        delay: 250,  
        data: function (params) {  
            return {  
                keyword: params.term, // 搜索条件,表示你在下拉搜索时输入的参数  
                page: params.page  //当前的页码  
            }  
        },  
        processResults: function (json, params) {  
            params.page = params.page || 1;  
            data = json.result  
            //将接口返回的参数进行赋值  
            data = $.map(data, function (obj) {  
                obj.id = obj.value;  
                obj.text = obj.name;  
                return obj;  
            });  
            return {  
                results: data,  
                pagination: {  
                    more: (params.page \* 10) < json.total\_count  
                }  
            };  
        },  
        cache: true  
    },  
});

如上就是select2插件的简单使用