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/select2@4.0.13/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/select2@4.0.13/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"});//烧脑两个小时的一行代码