Select2学习总结

拼搏现实的明天。 2022-06-02 23:09 162阅读 0赞

本文主要是对Select2插件常用使用方法的一些总结。包括其单选、多选、分组显示、按照拼音搜索功能。并通过测试示例对其效果进行了验证。  
一、效果图

![这里写图片描述][SouthEast]  
![这里写图片描述][SouthEast 1]  
![这里写图片描述][SouthEast 2]  
![这里写图片描述][70]  
二、 使用方式

1.使用前需要引入下面几个插件：  
select2.css或者select2.min.css  
select2.js或者select2.min.js  
jquery-2.0.3.min.js

2.如果在使用select2单选搜索时想要能够按照拼音字母进行搜索，需要引入pinyin.js插件，并对select2.js源码进行修改。

pinyin.js下载地址：[https://download.csdn.net/download/jianyuerensheng/10381102][https_download.csdn.net_download_jianyuerensheng_10381102]

select2.js文件修改方式：  
将select2.js文件中下面这部分代码屏蔽掉

var original = stripDiacritics(data.text).toUpperCase();
    var term = stripDiacritics(params.term).toUpperCase();
    // Check if the text contains the term
    if (original.indexOf(term) > -1) {
        return data;
    }

并在上述屏蔽代码的下面添加以下代码：

//拼音搜索功能
    if (stripDiacritics(data.text).toPinYin === undefined) {
        var original = stripDiacritics(data.text).toUpperCase();
        var term = stripDiacritics(params.term).toUpperCase();
        // Check if the text contains the term
         if (original.indexOf(term) > -1) {
             return data;
        }
    } else {
        //以下为拼音搜索功能新增代码（4866行~4876行）
        var original = '';
        var original1 = '';
        var term = stripDiacritics(params.term).toUpperCase();
        if (stripDiacritics(data.text).toPinYin != undefined) {
            var result = stripDiacritics(data.text).toPinYin();
            original = result[0].indexOf(stripDiacritics(params.term).toUpperCase());
            original1 = result[1].indexOf(stripDiacritics(params.term).toUpperCase());
            if (original == -1 && original1 == -1) {
                original = stripDiacritics(data.text).toUpperCase().indexOf(term);
            }
        }
        // Check if the text contains the term
        if (original > -1 || original1 > -1) { //如果匹配则original为0
            return data;
        }
    }

三、常用功能说明

1.常用参数设置含义

tags: true, // 根据搜索框创建option，默认false
    maximumSelectionLength: 6, // 最多能够选择的个数
    multiple: true, // 多选，默认false
    data: initdata, // 下拉框绑定的数据
    allowClear: true, // 清空，默认false
    placeholder: '请添加或选择语言' // 占位提示符
    maximumInputLength: 20, // 允许搜索长度 
    minimumResultsForSearch: 20, // 至少20个结果的时候显示搜索 
    minimumResultsForSearch: Infinity, // 永久隐藏搜索框 
    selectOnClose: true, // 结果显示高亮 
    closeOnSelect: false, // select选中关闭下拉框 
    separator: ",", // 分隔符

2.select2事件：

//置空 
    $eventSelect.val(null).trigger("change");  
    //选中 
    $eventSelect.on("selected", function (e) {  })  
    //移除 
    $eventSelect.on("removed", function () {  })  
    //多个事件 
    $eventSelect.on("close removed", function () {  })

3.获取value和text

$("#xa").val();  
    $("#xa").select2("val");  
    $("#xa").select2('data').text ;

四、测试源码示例

1.select2Test.html代码：

<!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>select2</title>
    </head>
    <body>
        <link href="../../plugins/select2/css/select2.css" rel="stylesheet" />
        <div>
            <label style="width: 100px; font-size: 14px;">单选</label>
            <select id="sel_menu" style="width: 400px;" >
                <option value=""></option>
            </select>
        </div>
        <div style="margin-top:20px;">
            <label style=" width: 100px; font-size: 14px;">多选</label>
            <select id="sel_menu2" multiple="multiple" style="width: 400px;"></select>
        </div>
        <div style="margin-top:20px;">
            <label style="width: 100px; font-size: 14px;">多选(含选中项)</label>
            <select id="sel_menu3" multiple="multiple" style="width: 400px;"></select>
        </div>
        <button onclick=getSelectedData() style ="margin-top: 20px;">多选选中值</button>
        <div style="margin-top:20px;">
            <label style=" width: 100px; font-size: 14px;">分组显示</label>
            <select id="sel_menu4" style="width:400px;"></select>   
        </div>  
        <script src="../../plugins/jquery-2.0.3.min.js"></script>
        <script src="../../plugins/select2/js/select2.js"></script>
        <script src="../../plugins/pinyin/pinyin.js"></script>
        <script src="../../js/select2Test.js"></script>
    </body>
    </html>

2.select2Test.js代码：

//下拉框数据
    var initdata = ["Java", "JavaScript", "C++", "C#", "Python", "PHP"];
    //选中数据
    var selectedData = ["Java", "PHP"];
    //分组下拉框数据（带ID）
    var initGroupDataWithId=[
        { "text": "熟悉的", "children": [{ "id": 1, "text": "Java" }, { "id": 2, "text": "JavaScript" }, { "id": 3, "text": "C#" }, { "id": 4, "text": "PHP" }] },
        { "text": "不熟悉的", "children": [{ "id": 5, "text": "C++" }, { "id": 5, "text": "Python" }, { "id": 5, "text": "GO" }] }
    ];
    //分组下拉框数据
    var initGroupData = [
        { "text": "熟悉的", "children": ["Java", "JavaScript", "C#", "PHP"] },
        { "text": "不熟悉的", "children": ["C++", "Python", "GO"] }
    ];
    
    //初始化页面加载
    $(document).ready(function () {
    
        //初始化select2单选
        initSelect2WithSearch();
    
        //初始化select2多选（没有选中项）
        initSelect2();
    
        //初始化select2多选（包含选中项）
        select2WithData(selectedData);
    });
    
    /** * 初始化select2单选，默认带搜索功能。 */
    function initSelect2WithSearch() {
        $("#sel_menu").select2({
            tags: true,
            placeholder: '请搜索或选择语言',
            data: initdata,
            allowClear: true
        });
    }
    /** * 初始化select2多选（没有选中项） */
    function initSelect2() {
        $("#sel_menu2").select2({
            tags: true,
            maximumSelectionLength: 5,
            placeholder: '请添加或选择语言',
            multiple: true,
            maximumInputLength: 10,//允许长度 
            data: initdata,
        });
    }
    
    /** * 初始化select2多选（包含选中项） */
    function select2WithData(selectedData) {
        $("#sel_menu3").select2({
            tags: true,                          //支持新增，默认为false
            maximumSelectionLength: 6,           //最多能够选择的个数
            multiple: true,                      //支持多选，默认为false
            data: initdata,                      //下拉框绑定的数据
            allowClear: true,                    //支持清空，默认为false
            placeholder: '请添加或选择语言'      //提示语
        }).val(selectedData).trigger('change');  //多选情况下给选中项的赋值
    }
    
    /** * 获取多选框选中项的值 */
    function getSelectedData() {
        var mulSelData = $("#sel_menu3").val().join(",");//获取多选输入框选中值的方式
        alert("sel_menu3的选中项是：" + mulSelData);
    }
    /** * 下拉列表分组显示 */
    function initSelect2Group() {
        $('#sel_menu4').select2({
            placeholder: '请选择',
            multiple: true,
            data: initGroupData
        });
        $('#sel_menu4').select2().val(["Java"]).trigger('change');
    }

3.运行结果：  
![这里写图片描述][70 1]

参考博文：[http://blog.csdn.net/u014388408/article/details/50587405][http_blog.csdn.net_u014388408_article_details_50587405]

[SouthEast]: /images/20220603/dba2625dd29a40e78969983cbcd2f1ef.png
[SouthEast 1]: /images/20220603/754b8ca6120b4271ad754fb3b1abc0c7.png
[SouthEast 2]: /images/20220603/1beae2d50a494c8985a644d1312556f5.png
[70]: /images/20220603/3cfc91a0a79241aab6dd4fe78f3469e3.png
[https_download.csdn.net_download_jianyuerensheng_10381102]: https://download.csdn.net/download/jianyuerensheng/10381102
[70 1]: /images/20220603/61bb1ee734fb4735aef5cd824bc8d5c6.png
[http_blog.csdn.net_u014388408_article_details_50587405]: http://blog.csdn.net/u014388408/article/details/50587405