1、select2多選初始化demo
<!DOCTYPE html>
<html>
<head>
<title>表格數據源</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 引入 Bootstrap -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
<!-- 加載 Jquery -->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<!-- 包括所有已編譯的插件 -->
<script src="js/bootstrap.min.js"></script>
<!-- 加載 Select2 -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>
</head>
<body>
<h4>原始數據集</h4>
<p id="sourceData"></p>
<h4>數據源</h4>
<table id="theTable" style="border: 1px solid black">
<thead>
<td>序號</td>
<td>設備型號</td>
<td>採集數據</td>
</thead>
<tbody>
<tr>
<td>1</td>
<td>華爲M20，華爲M30</td>
<td><button onclick="OnClickBtn(this)">顯示到select2</button></td>
</tr>
<tr>
<td>2</td>
<td>華爲P30，華爲P40</td>
<td><button onclick="OnClickBtn(this)">顯示到select2</button></td>
</tr>
</tbody>
</table>
<h4>多選select2——默認選中多個</h4>
<select id="mobileModel" class="form-control js-example-basic-multiple" style="width: 200px">
</select>
<script>
var sourceData = [
{
id:0,
text:"華爲M20",
},{
id:1,
text:"華爲M30",
},{
id:2,
text:"華爲P30",
},{
id:3,
text:"華爲P40",
},{
id:4,
text:"華爲P50",
},{
id:5,
text:"華爲P60",
}
]
$(document).ready(function(){
document.getElementById("sourceData").innerHTML = JSON.stringify(sourceData);
InitSelect2();
})
//初始化select2
function InitSelect2(){
$("#mobileModel").select2({
data:sourceData,
placeholder: "請選擇",
allowClear: true,
multiple: true,
closeOnSelect: false,
escapeMarkuo: function(markup){
return markup;
},
minimumInputLength: 0,
templateResult: function formatRepo(repo){
var state = $('<span>' + repo.text + '</span>')
return state;
},
templateSelection: function formatRepoSelection(repo){
var state = $('<span style="background-color:lightskyblue">' + repo.text + '</span>')
return state;
},
})
}
function OnClickBtn(obj){
var rowindex = $(obj).parent().parent().index(); //行號
var oTable = document.getElementById("theTable");
var tDataStr = oTable.rows[rowindex + 1].cells[1].innerHTML;//取到表格中的數據
var tDataArr = tDataStr.split("，");
var arr = [];
for(const sourText in sourceData){
for(const tData in tDataArr){
//假定當前只有表格中的字符串可用，與數據源比對，相同則取出id保存
if(tDataArr[tData] === sourceData[sourText].text){
arr.push(sourceData[sourText].id);
}
}
}
//循環結束，得到對應的id數組
$("#mobileModel").val(arr).trigger('change');
}
</script>
</body>
</html>
2、change事件
select2添加“onchange”事件幾種辦法：
A：最常見的
//直接定義
<select id="selectId" onchange="OnChangeSelect2()"></select>
//html
oParent.innerHTML = '<select id="selectID" onchange="OnChangeSelect2()"></select>'
//都沒問題
B：綁定事件
錯誤的寫法
var oSelect = document.createElement('select');
oSelect.addEventListener('change',OnChangeSelect2);
//或使用匿名函數
oSelect.addEventListener('change',function(){...});
//這都是行不通的。。。
正解（見官網https://select2.org/programmatic-control/events）
var oSelect = document.createElement('select');
//oSelect.on('select2:select',.....//錯誤,可以用 $("#ID") 或 $(對象object) 如下
$(oSelect).on('select2:select',function(e){//'select2:select' 有可能因版本不同，會變化
OnChangeSelect2();
})
function OnChangeSelect2(){
//響應事件
}
//萬金油寫法，不論是動態創建還是直接代碼創建，都能實現響應
3、取值
A：普通select取值
//寫法可能不止一種
var text = $("selectID").find("option:selected").text();//取text
var value = $("selectID").find("option:selected").val();//取value
$("#selectID option[value='" + value + "']").attr("disabled",true);//點擊後禁用
B：select2取值
var value = $("#selectID").select2("data")[0].text;
//有可能沒選，這個時候取值會報錯，所以
var len = $("#selectID").select2("data").length;
var value = "";
if(0 !== len){
value = $("#selectID").select2("data")[0].text;
value = $("#selectID").select2("data")[0].value;//或者取value
value = $("#selectID").select2("data")[0].id;//取什麼都可以，前提是已經寫入的
}
4、動態改變select2寬度
情況是這樣的：select2 + input組成控件組，後面有"-"號，點擊刪除當前行控件組（第一行不可刪除），外部有“+”號，點擊添加一行同樣的控件組。
根據select2選定值，動態確定input是否需要顯示，不顯示時select2寬度300px；顯示input時，select2寬度200px，input寬度100px；後面“-”號方可縱向對齊。所以select2選定後需要動態改變其寬度，太難了！
感謝這位作者的啓發：https://www.cnblogs.com/bibi-feiniaoyuan/p/9377976.html
$("#select2ID").next().css({"width":"300px"});//燒腦兩個小時的一行代碼