select2是一个非常好用的下拉框插件，支持很多功能。
官方文档，例子：http://select2.github.io/
现在记录一下我在工作中用到的下拉框多值选择。界面如下：
在引入css 、js文件之后，html页面如下：
<select id="cluster" class="select2" multiple="multiple">
<option value="1">jiesi-1</option>
...
<option value="5">jiesi-8</option>
</select>
初始化：
在js中加载的时候初始化select.
$("#id").select2();
当然，这是默认的不带任何属性的初始化，还可以带一些参数，具体如下：
$('#id').select2({
placeholder : '输入话题关键字',
tags : true,
multiple : true,
height: '40px',
maximumSelectionLength : 3,
allowClear : true,
language: "zh-CN",
data : itemList itemList是[{}{}{}{}]格式的数组
});
其他具体参数，转载如下：
https://blog.csdn.net/u011317027/article/details/62891286/
使用：
设置select选中某个值：
$("#cluster").val(3);//设置选中值
$("#cluster").trigger("change");//触发change事件，让界面上显示选中的值
设置select多值选中：
$("#cluster").val([2,3]).trigger("change");//设置多个值选中
设置select选中某个值，并且触发选中事件
$("#clusterSelect").val(selectedCluster.id).trigger("change").trigger("select2:select");
//获取select选中的值：
alert($("#cluster").val());//3,4,5 //输出选择的value，获得的是数组格式 但是直接alert是显示的以逗号隔开
var selected = $("#cluster option:selected").text();//选择的文本值 中间没有逗号间隔开！
获得自定义属性：
$("#cluster option:selected").attr("name");
select的清空：
首先清空option很简单：$("#select2_id").empty();但是这样清除了之后，选中的值仍然在文本框里显示着：
这个功能很小，只是一个函数的问题，之所以写这篇文章是因为当时遇到这个问题在百度上搜索半天无果，希望能帮到遇到该问题的朋友。
解决方案：
$("#search-orgId").select2("val", "");
之所以这么难找，是因为select2官方网站在最新版本的demo程序中没有讲到清除选择，我是在3.5版本的demo例子中找到的解决方案，3.5版本的例子还是蛮多的，感觉比4.0版本的要好，3.5版本的网址为：点击打开链接
---------------------
作者：一日夜
来源：CSDN
原文：https://blog.csdn.net/u011317027/article/details/62891286?utm_source=copy
版权声明：本文为博主原创文章，转载请附上博文链接！