您现在的位置是:网站首页>>前端技术>>html+css+js

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

发布时间:2020-01-06 10:34:52作者:wangjian浏览量:53点赞量:1

    在这之前对于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)单选框现象:

    image.png

    多选框现象:

    image.png

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

1 +1