1.引入 formSelect 相关资源
<link rel="stylesheet" href="${base}/static/layui/formSelects-v4.css" media="all"/>
<script type="text/javascript" src="${base}/static/layui/formSelects-v4.js"></script>
2.下拉复选框
<div class="layui-inline">
<label class="layui-form-label" style="color: #666666;width: 70px">信道:</label>
<div class="layui-input-block" style="width: 300px">
<select name="sendQueueChannel" id="sendQueueChannel" xm-select-height="36px" xm-select-search
xm-select-skin="default" xm-select="sendQueueChannel" lay-filter="sendQueueChannel">
</select>
</div>
</div>
3.全局定义一次, 加载formSelects
layui.config({
base: "${base}/static/layui/" //formSelects-v4.js的路径
}).extend({
formSelects: 'formSelects-v4'
});
4.加载模块
layui.use(['layer', 'form', 'table', 'layedit', 'laydate', 'jquery', 'formSelects'], function () {
var form = layui.form,
laydate = layui.laydate,
layer = layui.layer,
$ = layui.jquery;
var formSelects = layui.formSelects;
// 页面打开时异步加载下拉复选框所有信道数据以及回显
$(function () {
$.ajax({
type: "GET",
url: "/admin/devData/getAllChannelAndEcho",
success: function (data) {
$.each(data.allChannelList, function (index, item) {
// alert(index);
// alert(item);
$("#sendQueueChannel").append(new Option(item));
});
//下拉多选框重新加载
formSelects.render();
//下拉多选框回显
formSelects.value('sendQueueChannel', data.echoList);
}, error: function () {
alert("查询信道失败")
}
});
});
}