layui框架中利用xm-select实现下拉多选功能,以及如何设置默认值
xm-select.js的下载地址:https://gitee.com/maplemei/xm-select/tree/master/dist
引入xm-select.js
<script src="/static/tools/pear/component/pear/xm-select.js"></script>
dom元素
<div id="doors"></div>
layui中使用
layui.use(['form', 'jquery', 'select'], function () {
let form = layui.form;
let $ = layui.jquery;
let select_arr = [];
let xmselect_dom;
// 初始化多选下拉框
xmselect_dom = xmSelect.render({
el: '#doors', // 选择器
name: 'doors', // input name
max: 2,
data: []
});
动态渲染并给默认选中值
$.ajax({
url: "{:url('user/get_xiu_door')}",
data: {
staffid: staffid,
areaid: areaid
},
dataType: 'json',
type: 'post',
success: function (res) {
console.log(res);
let arr = []
let arr0 = []
for (let i = 0; i < res.length; i++) {
const element = res[i];
if (!element.staff && !element.staff1 && !element.staff) {
arr.push({ name: element.num, value: element.id })
} else {
arr.push({ name: element.num, value: element.id })
arr0.push(element.id)
}
}
select_arr = arr
console.log(arr);
// 初始化多选下拉框
xmselect_dom = xmSelect.render({
el: '#doors', // 选择器
name: 'doors', // input name
max: 2,
data: select_arr, //下拉的数据
initValue: arr0 //默认选中的值 如:[6,7]
});
}
})
浙公网安备 33010602011771号