不废话，上图！
上代码！
<!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 οnclick="OnClickBtn(this)">显示到select2</button></td>
</tr>
<tr>
<td>2</td>
<td>华为P30，华为P40</td>
<td><button οnclick="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>