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
版權聲明：本文為博主原創文章，轉載請附上博文鏈接！