下拉框、下拉控件之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的引入：

    注意：还需引入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 源码

3.2 初始化select2

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

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

3.4获取、更改select的value值

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

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