欢迎您的光临,本博所发布之文章皆为作者亲测通过,如有错误,欢迎通过各种方式指正。由于本站位于香港虚拟主机,故速度比较慢。

文摘  JS Select2多选下拉组件使用详解

JS工具 网络 376 0评论

一、简介


Select2是Jquery用来代替选择框的一种组件。它让你可以定制下拉框,并且支持搜索、标记,远程数据源,无限滚动和其他更高级的功能。

它的github官网地址为:https://select2.github.io/  ,具体的使用案例,可以参考地址:https://select2.github.io/examples.html  。

Select2参数文档说明:https://select2.github.io/options.html 

3.5.3文档:http://select2.github.io/select2/#documentation 

Select2源码:https://github.com/select2/select2 


二、效果展示


一些通用的单选、多选、分组等功能这里就不多做介绍了,multiselect这方面是强项。重点介绍下select2的一些特性效果:


1、多选效果

111.png

可以设置最多只能选几个

222.png


2、图文结合的效果

333.png


3、远程搜索功能(即在用户输入搜索内容时动态去后台取数据)

输入内容前

444.png输入空格搜索出全部

444-1.png滚动条滑动到底部自动加载剩余项

444-2.png输入文本动态去后台过滤

444-3.png

更高级的用法如:

55.png

以上代码示例见本文后面实例


三、代码使用示例


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>

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;
}
并在select2.js文件添加以下代码:
//拼音搜索功能
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);
    }
}


3.测试代码效果:


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>
    <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"];
//初始化页面加载
$(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);
}


3)运行结果: 

666.jpg


四、常用功能说明


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 ;


4.构造函数

Select2 常用属性介绍(2.5.2版本):https://select2.org/configuration/options-api

参数类型描述
Width字符串控制 宽度 样式属性的Select2容器div
minimumInputLengthint最小数量的字符
maximumInputLengthint最大数量的字符
minimumResultsForSearchInt最小数量的结果
maximumSelectionSizeint可选择的最大条目数
placeholder字符串选择初始值
separator字符串分隔符字符或字符串用来划定id
allowClear布尔此选项只指定占位符
multiple布尔Select2是否允许选择多个值
openOnEnter
打开下拉如果设置为true,当用户按下回车键,Select2关闭。 默认情况下启用这个选项。
id函数函数用于获取id从选择对象或字符串id存储代表的关键
matcher函数用于确定是否搜索词匹配一个选项时使用一个内置的查询功能
sortResults函数用于排序列表搜索之前显示的结果。
formatSelection函数函数用于呈现当前的选择
formatResult函数函数用来渲染结果,
formatResultCssClass函数函数用于添加css类结果元素
formatNoMatches字符串/函数字符串包含“不匹配”消息,或


函数用于呈现信息
formatSearching字符串/函数字符串包含“搜索… “消息,或


函数用于呈现显示的消息 正在进行搜索。
formatAjaxError字符串/函数字符串包含消息“加载失败”,或


函数用于呈现信息
formatInputTooShort字符串/函数包含“搜索”输入太短消息的字符串,或


函数用于呈现信息。
formatInputTooLong字符串/函数包含“搜索”输入太短消息的字符串,或


函数用于呈现信息
formatInputTooLong字符串/函数包含“搜索输入字符串太长”消息,或


函数用于呈现信息。
formatSelectionTooBig字符串/函数字符串包含“你不能选择任何更多的选择”消息,或


函数用于呈现信息
formatLoadMore字符串/函数字符串/函数
createSearchChoice函数创建一个新的可选选择从用户的搜索词。 允许创建通过查询选择不可用 功能。 有用的用户可以创建动态的选择时,如“标签”usecase。
createSearchChoicePosition函数/字符串定义的位置插入元素
initSelection函数调用Select2创建允许用户初始化选择的值 select2附加到元素
tokenizer函数记号赋予器函数可以处理后输入搜索框的输入每一个按键和提取 并选择选择。
tokenSeparators函数一个字符串数组定义标记为默认的分隔符 分词器 功能。 默认情况下,此选项设置为一个空数组标记这意味着使用默认 编译器是禁用的。 通常是明智的,设置该选项值相似 [‘,’,’ ‘] 。
query函数函数用于搜索词的查询结果。
ajax对象选择内置的ajax查询功能。 这个对象作为快捷方式有手动编写一个函数,执行ajax请求。 内置函数支持更高级的特性,比如节流和无序的反应。
data数组/对象择建在查询功能,使用数组。
tags数组/函数将Select2放入“标签’mode,用户可以添加新的选择和预先存在的标签是通过提供 这个选项的属性是一个 数组 或者一个 函数 返回一个 数组的 对象 或 字符串 。 如果 字符串 而不是使用 对象 他们将有一个被转换成一个对象 id 和 文本 属性相等 的值 字符串 。
containerCss函数/对象内联css将被添加到select2的容器。 一个对象包含css属性/值密钥对或一个函数,这个函数返回一个对象。
containerCssClass函数/字符串Css类将被添加到select2容器的标签。
dropdownCss函数/对象内联css将被添加到select2下拉的容器。 一个对象包含css属性/值密钥对或一个函数,这个函数返回一个对象。
dropdownCssClass函数/字符串Css类将被添加到select2下拉的容器。
dropdownAutoWidth布尔当设置为 真正的 尝试自动尺寸下拉基于内容的宽度。
adaptContainerCssClass函数过滤器/重命名的css类,因为他们被复制从源标签select2容器标签
adaptDropdownCssClass函数滤器/重命名的css类,因为他们被复制从源标签select2拉标签
escapeMarkup函数函数用于后处理标记从格式化程序返回功能。 默认情况下这个功能转义的html实体,以防止javascript注入。
selectOnBlur布尔设置为 真正的 如果你想要Select2选择当前高亮选项时模糊。
loadMorePadding整数定义了多少像素需要加载下一页前折以下。 默认值是 0 这意味着结果列表需要滚动到下一个页面的底部加载的结果。 这个选项可以用来触发加载更快,可能导致更流畅的用户体验。
nextSearchTerm函数函数用于确定下一个搜索词应该是什么


Example Code(针对目标元素为 div 例如:<div id="e1">...</div> )

    $("#e1").select2(); 
    $("#e1").click(function () { alert("Selected value is: "+$("#e1").select2("val"));}); // 获取选中的ID值
    $("#e1").click(function () { $("#e2").select2("val", "CA"); }); // id="CA" 选中(好像单个还不行,以数组形式才行)
    $("#el").click(function() { $("#e2").select2("val", ""); });  // 不选中任何值
    $("#e1").click(function () { var data = $("#e2").select2("data"); }); // 获取选中对象
    $("#e1").click(function () { $("#e2").select2("data", {id: "CA", text: "California"}); });
    $("#e1").click(function () { $("#e2").select2("open"); }); // 打开下拉框
    $("#e1").click(function () { $("#e2").select2("close"); }); // 关闭下拉框
    $("#e1").select2({placeholder: "Select a state"});  // 下拉框 提示
    $("#e1").click(function () { alert("Selected value is: "+$("#e2").select2("val"));}); // 获取选中的ID值
    $("#e1").click(function () { $("#e8_2").select2("val", ["CA","MA"]); });   // id="CA",id="MA" 选中
    $("#e12").click(function () { alert("Selected value is: "+JSON.stringify($("#e2").select2("data")));});// 获取选中JSON对象
    $("#e1").click(function () { $("#e2").select2("data", [{id: "CA", text: "California"},{id:"MA", text: "Massachusetts"}]); });
// 加载数据
$("#e11").select2({
    placeholder: "Select report type",
    allowClear: true,
    data: [{id: 0, text: 'story'},{id: 1, text: 'bug'},{id: 2, text: 'task'}]
});
// 加载数组  支持多选
$("#e11_2").select2({
    createSearchChoice:function(term, data) { if ($(data).filter(function() { return this.text.localeCompare(term)===0; }).length===0) {return {id:term, text:term};} },
    multiple: true,
    data: [{id: 0, text: 'story'},{id: 1, text: 'bug'},{id: 2, text: 'task'}]
});
function log(e) {
    var e=$("<li>"+e+"</li>");
    $("#events_11").append(e);
    e.animate({opacity:1}, 10000, 'linear', function() { e.animate({opacity:0}, 2000, 'linear', function() {e.remove(); }); });
}
// 对元素 进行事件注册
$("#e11")
.on("change", function(e) { log("change "+JSON.stringify({val:e.val, added:e.added, removed:e.removed})); })// 改变事件
.on("select2-opening", function() { log("opening"); })  // select2 打开中事件
.on("select2-open", function() { log("open"); })     // select2 打开事件
.on("select2-close", function() { log("close"); })  // select2 关闭事件
.on("select2-highlight", function(e) { log ("highlighted val="+ e.val+" choice="+ JSON.stringify(e.choice));})  // 高亮
.on("select2-selecting", function(e) { log ("selecting val="+ e.val+" choice="+ JSON.stringify(e.choice));})  // 选中事件
.on("select2-removing", function(e) { log ("removing val="+ e.val+" choice="+ JSON.stringify(e.choice));})  // 移除中事件
.on("select2-removed", function(e) { log ("removed val="+ e.val+" choice="+ JSON.stringify(e.choice));}) //移除完毕事件
.on("select2-loaded", function(e) { log ("loaded (data property omitted for brevity)");})  //加载中事件
.on("select2-focus", function(e) { log ("focus");}) //获得焦点事件
.on("select2-blur", function(e) { log ("blur");});  //失去焦点事件
$("#e11").click(function() { $("#e11").val(["AK","CO"]).trigger("change"); });


五、使用笔记


1、多选效果

select2的多选很简单,设置一个属性就好了。

<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Content/bootstrap/js/bootstrap.js"></script>
<link href="~/Content/bootstrap/css/bootstrap.css" rel="stylesheet" />
<script src="~/Content/select2-master/dist/js/select2.js"></script>
<link href="~/Content/select2-master/dist/css/select2.css" rel="stylesheet" />
<select id="sel_menu2" multiple="multiple" class="form-control">
         <optgroup label="系统设置">
              <option value="1">用户管理</option>
              <option value="2">角色管理</option>
              <option value="3">部门管理</option>
              <option value="4">菜单管理</option>
         </optgroup>
         <optgroup label="订单管理">
              <option value="5">订单查询</option>
              <option value="6">订单导入</option>
              <option value="7">订单删除</option>
              <option value="8">订单撤销</option>
         </optgroup>
         <optgroup label="基础数据">
              <option value="9">基础数据维护</option>
          </optgroup>
</select>


//多选
$("#sel_menu2").select2({
        tags: true,
        maximumSelectionLength: 3  //最多能够选择的个数
});


2、图文结合的效果


<select id="sel_menu" class="js-example-templating js-states form-control">
             <optgroup label="系统设置">
                 <option value="1">用户管理</option>
                 <option value="2">角色管理</option>
                 <option value="3">部门管理</option>
                 <option value="4">菜单管理</option>
             </optgroup>
             <optgroup label="订单管理">
                 <option value="5">订单查询</option>
                 <option value="6">订单导入</option>
                 <option value="7">订单删除</option>
                 <option value="8">订单撤销</option>
             </optgroup>
             <optgroup label="基础数据">
                 <option value="9">基础数据维护</option>
             </optgroup>
         </select>


$(function () {
    //带图片
    $("#sel_menu").select2({
        templateResult: formatState,
        templateSelection: formatState
    });
});
function formatState(state) {
    if (!state.id) { return state.text; }
    var $state = $(
      '<span><img src="/content/images/' + state.element.value.toLowerCase() + '.ico" class="img-flag" /> ' + state.text + '</span>'
    );
    return $state;
};


3、远程搜索功能(即在用户输入搜索内容时动态去后台取数据)


<select id="sel_menu3" class="js-data-example-ajax form-control">
      <option value="3620194" selected="selected">请选择</option>
</select>


$(function () {
    //远程筛选
    $("#sel_menu3").select2({
        ajax: {
            url: "/Home/GetProvinces",
            dataType: 'json',
            delay: 250,
            data: function (params) {
                return {
                    q: params.term, // search term
                    page: params.page
                };
            },
            processResults: function (data, params) {
                params.page = params.page || 1;
                return {
                    results: data.items,
                    pagination: {
                        more: (params.page * 10) < data.total_count
                    }
                };
            },
            cache: true
        },
        escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
        minimumInputLength: 1,
        templateResult: formatRepoProvince, // omitted for brevity, see the source of this page
        templateSelection: formatRepoProvince // omitted for brevity, see the source of this page
    });
});
function formatRepoProvince(repo) {
    if (repo.loading) return repo.text;
    var markup = "<div>"+repo.name+"</div>";
    return markup;
}


这里有要注意的一个地方就是processResults属性对应的方法有一个more属性用于是否分页显示的,这里的值要和你需要一次显示的值的条数匹配。

后台对应的方法如下:

public List<string> lstProvince = new List<string>() {"北京市","天津市","重庆市","上海市","河北省","山西省","辽宁省","吉林省","黑龙江省","江苏省","浙江省","安徽省","福建省","江西省","山东省","河南省","湖北省","湖南省","广东省","海南省","四川省","贵州省","云南省","陕西省","甘肃省","青海省","台湾省","内蒙古自治区","广西壮族自治区","西藏自治区","宁夏回族自治区","新疆维吾尔自治区","香港特别行政区","澳门特别行政区" };
        public JsonResult GetProvinces(string q, string page)
         {
            var lstRes = new List<Province>();
            for (var i = 0; i < 30; i++)
            {
                var oProvince = new Province();
                oProvince.id = i;
                oProvince.name = lstProvince[i];
                lstRes.Add(oProvince);
            }
            if (!string.IsNullOrEmpty(q.Trim()))
            {
                lstRes = lstRes.Where(x => x.name.Contains(q)).ToList();
            }
            var lstCurPageRes = string.IsNullOrEmpty(page) ? lstRes.Take(10) : lstRes.Skip(Convert.ToInt32(page) * 10 - 10).Take(10);
            return Json(new { items = lstCurPageRes, total_count = lstRes.Count }, JsonRequestBehavior.AllowGet);
        }


上面说了这么多,那么我们在选中select2的选项之后如何取值和赋值呢?


1、获取选中的值

 var oMenuIcon = $("#txt_menuicon_web").select2({
            placeholder: "请选择菜单图标",
            templateResult: oInit.formatState,
            templateSelection: oInit.formatState
        });
oMenuIcon.val();

2、设置select2的选中值

 var oMenuIcon = $("#txt_menuicon_web").select2({
            placeholder: "请选择菜单图标",
            templateResult: oInit.formatState,
            templateSelection: oInit.formatState
        });
 oMenuIcon.val("CA").trigger("change");


参考网址:

http://www.cnblogs.com/landeanfen/p/5099332.html 

https://www.cnblogs.com/always-online/p/4469060.html 

https://blog.csdn.net/jiangeeq/article/details/53116791 

https://blog.csdn.net/ywb201314/article/details/61196633 

https://blog.csdn.net/m0_37776094/article/details/79057892 


原文地址:https://blog.csdn.net/wulex/article/details/79498129

转载请注明: ITTXX.CN--分享互联网 » JS Select2多选下拉组件使用详解

最后更新:2018-12-13 09:51:50

赞 (2) or 分享 ()
游客 发表我的评论   换个身份
取消评论

表情
(0)个小伙伴在吐槽