下拉插件select2的使用总结

一、组件地址

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

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

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

二、引用内容：

使用select2首先需要引入其js及css文件
jquery:

<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>

css:

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/css/select2.min.css" rel="stylesheet" />

js:

<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/js/select2.min.js"></script>

三、组件使用效果

1、多选

2、远程搜索功能，输入文本动态后台过滤

3、设置最多只能选几个

四、使用示例：

基础使用：

<div>
 	<select class="singleSelect" style="width: 200px;">
         <option value="">--请选择--</option>
         <option value="">阿里</option>
         <option value="">阿姨</option>
         <option value="">江南</option>
         <option value="">杭州</option>
         <option value="">无锡</option>
         <option value="">上海</option>
     </select>
</div>
 <script type="text/javascript">
      $(document).ready(function() {
     	$('.singleSelect').select2();
      });
</script>

其他用法：
1、加载本地数据

var data = [{ id: 0, text: 'enhancement' }, { id: 1, text: 'bug' }, { id: 2, text: 'duplicate' }, { id: 3, text: 'invalid' }, { id: 4, text: 'wontfix' }];
$("#c01-select").select2({
  data: data,
  placeholder:'请选择',
  allowClear:true
})

2、加载远程数据

$('#territorialId').select2({
        language:"zn-CN",
        placeholder:'请选择',
        allowClear: true,//可以清除选项
        ajax: {
            url: "/territorial/listSelect",
            data: function (params) {
                return {
                    keyWord: params.term || '',    //搜索参数
                    page: params.page || 1,        //分页参数
                    rows: params.pagesize || 10,   //每次查询10条记录
                };
            },
            processResults: function (data, params) {
                params.page = params.page || 1;
                var list = data.list;
                list = $.map(list, function (obj) {
                    obj.text = obj.text || obj.terrName;
                    return obj;
                });
                return {
                    results:list,
                    pagination: {
                        more: (params.page) < data.totalPage
                    }
                };
            }
        }
    });

说明：
1）.url是请求的后台地址

2）.使用后台动态加载数据时传入请求参数params

3）.processResults接收后台返回数据，该回调函数返回一个对象，包含results、pagination属性，后台分也是必须返回pagination，pagination中的more用来判断是否还有下一页

4）.results属性为js对象数据，数组元素中必须包含id，text属性

list = $.map(list, function (obj) {
obj.text = obj.text || obj.terrName;
return obj;
});

3、获取选中项

var res=$("#c01-select").select2("data")[0] ; //单选
var reslist=$("#c01-select").select2("data");    //多选
if(res==undefined)
{
     alert("你没有选中任何项");
}
if(reslist.length)
{
     alert("你选中任何项");
}

4、清空选择项和设置不可用

//取消选中
$("#territorialId").select2("val","all");
//清空选择
$("#c01-select").val(null).trigger("change");
$("#c01-select").val("你的placeholder").trigger("change");//或者
//如果你使用的是input标签（默认就是本地数据），你可以用$("#c01-select").val('');来清空选项
//disabled
$("#c01-select").prop("disabled", false);//可用
$("#c01-select").prop("disabled", true);//不可用

5、启用多选

$("#c01-select").select2({
  data:data,
  multiple: true
});

五、select2常用的属性

Width	字符串	控制 宽度 样式属性的Select2容器div
minimumInputLength	int	最小数量的字符
maximumInputLength	int	最大数量的字符
minimumResultsForSearch	Int	最小数量的结果
maximumSelectionSize	int	可选择的最大条目数
placeholder	字符串	选择初始值
separator	字符串	分隔符字符或字符串用来划定id
allowClear	布尔	此选项只指定占位符
multiple	布尔	Select2是否允许选择多个值
openOnEnter		打开下拉如果设置为true,当用户按下回车键,Select2关闭。 默认情况下启用这个选项。
id	函数	函数用于获取id从选择对象或字符串id存储代表的关键
matcher	函数	用于确定是否搜索词匹配一个选项时使用一个内置的查询功能