Select2学习总结

最新推荐文章于 2021-09-26 09:19:33 发布

JackLiu16

最新推荐文章于 2021-09-26 09:19:33 发布

阅读量1.6k

点赞数

分类专栏： web前端

web前端专栏收录该内容

140 篇文章 1 订阅

订阅专栏

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

这里写图片描述

二、使用方式

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

<link href="../../plugins/select2/css/select2.css" rel="stylesheet" />
<script src="../../plugins/select2/js/select2.js"></script>
<script src="../../plugins/jquery-2.0.3.min.js"></script>

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

<script src="../../plugins/pinyin/pinyin.js"></script>

pinyin.js下载地址：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.运行结果：
这里写图片描述

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

出处：https://blog.csdn.net/jianyuerensheng/article/details/78780696?utm_source=copy

JackLiu16

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Select2学习总结

本文主要是对Select2插件常用使用方法的一些总结。包括其单选、多选、分组显示、按照拼音搜索功能。并通过测试示例对其效果进行了验证。一、效果图二、使用方式1.使用前需要引入下面几个插件：select2.css或者select2.min.cssselect2.js或者select2.min.jsjquery-2.0.3.min.js&lt;link href="../.....
复制链接

扫一扫