使用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插件的简单使用