下拉框、下拉控件之Select2（含多选）

这个select2组件的功能确实很强大，可以将图片放入到select里面随着文字一起显示。

组件的下载地址以及API说明地址：

1、Select2使用示例地址：https://select2.github.io/examples.html 、http://select2.github.io/select2/

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

3、Select2源码：https://github.com/select2/select2

页面

<select id="goodsId" name="goodsId" multiple="multiple" class="form-control">
</select>

引入js

<style type="text/css">
    .select2-container {
        z-index: 9999;
    }
</style>
<link type="text/css" rel="stylesheet" href="/static/plugins/select2/css/select2.min.css"/>
<script type="text/javascript" src="/static/plugins/select2/js/select2.min.js"></script>
<script type="text/javascript" src="/static/plugins/select2/js/i18n/zh-CN.js"></script>

js:

$("#goodsId").select2({
    placeholder: "请输入商品名搜索",
    minimumInputLength: 1,                                     //输入多少个字符后开始查询
    tags: false,                                                //不允许手动添加
    allowClear: true,                                          //可删除
    language: "zh-CN",
    maximumSelectionLength: 5,  // 多选 - 设置最多可以选择多少项
    tokenSeparators: [',', ' '], // 多选 - 输入逗号和空格会自动完成一个选项 前提是：tags: true
    ajax: {
        url: adminUrl + "/***/*****",
        type: 'get',
        delay: 250,
        data: function (params) {
            return {
                goodName: $.trim(params.term),
            };
        },
        processResults: function (response) {
            var items = [];
            var goods = response.data.goods;
            $.each(goods, function (index, good) {
                var goodName = good.goodName;
                items.push({id: good.id, text: goodName,goodsPrice:good.price})
            });
            return {
                results: items,
            };
        }
    }
});

效果

获取data-select2-id的值

    var goodids = $("#goodsId").select2("val");===》 ["541", "1566"]

以下内容更详细，来由：转载

一、Select2的功能简介

select2插件给我们带来了更加友好的交互方式，比如查询控件展开后可通过关键字进行检索

例如：

    

    Select2也可以选择带查询控件的选择框...

    

    

    Select2更是支持多值选择框...

    

二、如何使用Select2？

    2.1 通过CDN引用

     将以下两行代码添加到html页面，即完成了Select2的引入：

[html]  view plain  copy

1. <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />  
2. <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>  

    注意：还需引入jquery支持select2的使用

    2.2 通过离线引用

        到Select2官网下载对应版本的库，通过工程的相对路径完成Select2的引入：

        2.2.1 引入js资源库

        Select2的库下载后放在工程的webapp--->js文件夹中，Select2库的文件名称是“select2.min.js”

        因此引入路径为：【/js/select2.min.js】

        2.2.2 引入css样式

三、Select2常用API

3.1 源码

[html]  view plain  copy

1. <span>区域：</span>  
2. <select id="area" class="select2">  
3.     <option value="" selected="selected">请选择区域</option>  
4.     <option value="<strong>1</strong>">珠海</option>  
5.     <option value="<strong>2</strong>">深圳</option>  
6.     <option value="<strong>3</strong>">澳门</option>  
7.     <option value="<strong>4</strong>">香港</option>  
8. </select>  

3.2 初始化select2

[javascript]  view plain  copy

1. <script type="text/javascript">  
2.     //页面加载完成后初始化select2控件  
3.     $(function () {  
4.         $("#area").select2();  
5.     });  
6. </script>  

    select2()函数可添加相应配置：

[javascript]  view plain  copy

1. $('#area').select2({  
2.   placeholder: '请选择区域'  
3. });  

3.3 选中控件id="area"、value="1"的元素

[javascript]  view plain  copy

1. //初始化select2  
2. var areaObj = $("#area").select2();  
3. var optionVal = 1;  
4. areaObj .val(optionVal).trigger("change");  
5. areaObj .change();  

3.4获取、更改select的value值

    获取值：默认是获取当前控件选中元素对应的value值，参照3.1源码中，假设当前选中“珠海”，那么获取的value值就是1

[javascript]  view plain  copy

1. $("#area").select2('val');  

    更改值：将val更改为756；默认是更改当前控件选中元素对应的value值，参照3.1源码中，假设当前选中“珠海”，那么更改后的value值就是756

[javascript]  view plain  copy

1. $("#area").select2('val','756');