下拉框、下拉控件之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');  
 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值