依赖的文件:
multiple-select.min.css
jquery-3.5.1.min.js
multiple-select.min.js
multiple-select-zh-CN.min.js(可选)
HTML代码:
<select id="MulSelect" autocomplete="off" style="width: 200px;" multiple="multiple">
<option value=1>广东省</option>
<option value=2>河北省</option>
<option value=3>湖北省</option>
<option value=4>江苏省</option>
</select>
js代码:
$('#MulSelect').multipleSelect({
placeholder: "请选择",
selectAllText: "全选",
allSelected: "选择全部"
});
注意:如果需要中途改变option的数据,需要调用刷新:
$("#MulSelect").multipleSelect('refresh');
后端如果需要字符串的形式,例如逗号分隔参考:
// 获取select元素的options属性
const options = document.querySelector('#select').options
const selectedValueArr = []
for (let i = 0; i < options.length; i++) {
// 如果该option被选中,则将它的value存入数组
if (options[i].selected) {
selectedValueArr.push(options[i].value)
}
}
// 如果后端需要字符串形式,比如逗号分隔
const selectedValueStr = selectedValueArr.join(',')
// Ajax code here
// ...
初始化默认勾选项时可以参考:
var sceneIdList = "1,2";
sceneIdArr = sceneIdList.split(",");
$('#MulSelect option').each(function (i, content) {
if ($.inArray($.trim(content.value), sceneIdArr) >= 0) {
this.selected = true;
}
});
//加载完勾选项后也要刷新
$("#MulSelect").multipleSelect('refresh');
GitHub开源地址:
https://github.com/wenzhixin/multiple-select