JS组件系列——Bootstrap Select2组件使用小结

曾经终败给现在 2022-07-13 02:51 370阅读 0赞

前言：在介绍select组件的时候，博主之前分享过一篇[JS组件系列——两种bootstrap multiselect组件大比拼][JS_bootstrap multiselect]，这两个组件的功能确实很强大，只可惜没有图文结合的效果（也就是将图片放入到select里面随着文字一起显示）。前两天做一个菜单图标选择的功能，就要用到这个图文选择的功能。于是乎又是找啊找。终于不负所望，找到了我们伟大的select2组件。今天分享下这个组件的一些用法和特性。

## 一、组件说明以及API说明 ##

Select2使用示例地址：[https://select2.github.io/examples.html][https_select2.github.io_examples.html]

Select2参数文档说明：[https://select2.github.io/options.html][https_select2.github.io_options.html]

Select2源码：[https://github.com/select2/select2][https_github.com_select2_select2]

## 二、组件特性效果展示 ##

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

### 1、多选效果 ###

![459756-20160105161341200-283441815.png][]

![459756-20160105161409231-1553601507.png][]

可以设置最多只能选几个

![459756-20160105161357528-453032277.png][]

### 2、图文结合的效果 ###

![459756-20160105161541278-166994849.png][]

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

输入内容前

![459756-20160105161655450-1979564751.png][]

输入空格搜索出全部

![459756-20160105161707965-1597854125.png][]

滚动条滑动到底部自动加载剩余项

![459756-20160105161717903-1872054606.png][]

输入文本动态去后台过滤

![459756-20160105161748559-887253249.png][]

更高级的用法如：

![459756-20160105165251246-58056783.png][]

其实使用起来也不难，就是一个拼html的过程。

## 三、代码示例 ##

### 1、多选效果 ###

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

![复制代码][copycode.gif]

<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>

![复制代码][copycode.gif]

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

### 2、图文结合的效果 ###

![复制代码][copycode.gif]

<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>

![复制代码][copycode.gif]

$(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;
    };

![复制代码][copycode.gif]

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

![复制代码][copycode.gif]

$(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
        });
    });

![复制代码][copycode.gif]

function formatRepoProvince(repo) {
        if (repo.loading) return repo.text;
        var markup = "<div>"+repo.name+"</div>";
        return markup;
    }

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

后台对应的方法如下：

![复制代码][copycode.gif]

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);
            }

![复制代码][copycode.gif]

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

1、获取选中的值

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

oMenuIcon.val();

2、设置select2的选中值

oMenuIcon.val("CA").trigger("change");

[JS_bootstrap multiselect]: http://www.cnblogs.com/landeanfen/p/5013452.html
[https_select2.github.io_examples.html]: https://select2.github.io/examples.html
[https_select2.github.io_options.html]: https://select2.github.io/options.html
[https_github.com_select2_select2]: https://github.com/select2/select2
[459756-20160105161341200-283441815.png]: /images/20220713/40caaffa587d4e4489c57f41e54ad44f.png
[459756-20160105161409231-1553601507.png]: /images/20220713/1ef020e4ce75424aa065aa2faad5fc98.png
[459756-20160105161357528-453032277.png]: /images/20220713/f027de4fe27643ce83682bff39b07268.png
[459756-20160105161541278-166994849.png]: /images/20220713/dc0b94509708465c9c6349859d5262ad.png
[459756-20160105161655450-1979564751.png]: /images/20220713/315bab249008436d80df9779e046a48d.png
[459756-20160105161707965-1597854125.png]: /images/20220713/b33471472a504daf9a7447247501cf84.png
[459756-20160105161717903-1872054606.png]: /images/20220713/61f08b5edb724c89b0b1d07d3b46e75b.png
[459756-20160105161748559-887253249.png]: /images/20220713/317ec61b51c64a7e98ea77f9fb56da66.png
[459756-20160105165251246-58056783.png]: /images/20220713/f35777724c1442ac8fab3cde11905429.png
[copycode.gif]: /images/20220713/f57e271cd22c4bfdbf2a73babbf25a2a.png