layui监听select下拉框获取数据通过doT.js加载页面多选框

form表单中的下拉框

<select  class="layui-input" name="base_id" datatype="*" lay-filter="base_id">
     <option value="">请选择</option>
    <#list baseList as base>
     <option value="${base.id!''}" disabled="disabled" >${base.base_name!''}</option>
         <#list base.base_list as ba>
                <option value="${ba.id!''}">&nbsp;&nbsp;&nbsp;&nbsp;${ba.base_name!''}</option>
         </#list> 
    </#list> 
</select>

>

layui通过lay-filter=”base_id”检测选中事件

layui.use(['form','util'], function(){
    var form = layui.form;

    /*监听select框*/
    form.on('select(base_id)', function(data){
         var base_id = data.value;
        //remove掉原来的html
         $('#reSpec').remove();
        if(base_id==""){
            parent.layer.alert("请选择联系人");
        }else{
            selectspec(base_id);
        }
    });

    /*数据新增方法增加checkbox*/
    function selectspec(base_id) {
        $.ajax({
            type : "post",
            url : "${ctx}/origin/goods/select_spec",
            data : {base_id,base_id}, // 你的formid
            error : function(request) {
                parent.layer.alert("网络超时");
            },
            success : function(data) {
                 if (data.length != 0) {
                    var evaluation = doT.template($('#adTemp').html());//组装数据
                    $("#spec").append(evaluation(data));//添加到id="spec"中
                     form.render();//重新渲染，应为动态加载所以需要重新渲染
                } 
            }
        });
    };
});

在页面html中添加上述方法查到的数据(下面的是页面html)

>
    <div id="spec" >
        <div class="layui-form-item" id="reSpec">
            <label class="layui-form-label">请选择规格:</label>
            <div class="layui-input-block" >
            <#list spec as sp>
                <input type="checkbox" name="spec"  lay-skin="primary" <#if goods.spec?contains("${sp}")> checked="checked" </#if> title="${sp}" value="${sp}">
            </#list>
            </div>
        </div>
    </div>
        <script id="adTemp" type="text/x-dot-template">
        <div class="layui-form-item" id="reSpec">
            <label class="layui-form-label">请选择规格:</label>
            <div class="layui-input-block" >
            {{~it:val:index}}
                <input type="checkbox" name="spec" lay-skin="primary"  title="{{=val}}" value="{{=val}}"/>
            {{~}}
            </div>
        </div>

    **上述html代码中id为spec的div为页面加载时匹配目前选中的多选框，当触发下base_id属性对应的属性框时会调用查询方法先清除原来数据，在加载新查找的数据。根据id为adTemp的script调用doT.js方法加载新查询的数组，当查询到的数据为对象时取值换做{{==val.name}}判断为空时显示空字符串格式:{{==val.name?val.name:""}}**