【Layui】下拉复选框和回显展示

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("查询信道失败")
                }
            });
        });
      }