layui中select 实现二级联动

layui中实现二级联动，有的时候二级联动不出来

给大家介绍两种方法

<tr>
    <td class="tds" >企业名称：</td>
    <td>
        <select name="enter_id"   lay-filter="father_enter" >
            <option value="">请选择</option>
            {volist name="enterlist" id="vo"}
               <option value="{$vo.id}">{$vo.enterprise}</option>
            {/volist}

        </select>
    </td>
    <td class="tds">子企业名：</td>
    <td>
        <select name="accout_type"  lay-verify="required"  id="child_enter" >
            <option value="">请选择</option>
        </select>
    </td>

</tr>

第一种:

在layui中要使用select事件绑定 

form.on('select(father_enter)', function(data){

    if(data.value==""){

        // console.log("sss");
        layer.msg("请选择企业名称");
        return false;
    }

/* ajax 这里要请求后台API接口*/

 

$.post("{:url('XXXXXX')}",{"id":data.value},function( res){

    if(res.code == 1){
        var enterlists=  res.entelist;
        var str="";
        for (var i=0;i<enterlists.length;i++){

          str +='<option value="'+enterlists[i]["id"]+'">'+enterlists[i]["enterprise"]+'</option>';   //这步骤 拼接select 中option的数据

        }

        $("#child_enter").html(str);
        form.render();         //注意不要忘记渲染form ，否则是不会出现select数据的      
    }

}）；

 

第二种： 在ajax请求的数据，在后台把select 中option数据，通过后台拼接好，然后返回数据，在接口返回值中，直接获取数据，

 将数据 使用

$("#child_enter").html(res.htmlsoption);

form.render(); //还是不要忘记渲染form ，否则是不会出现select数据的

 

 

以上两种方法，希望对大家有帮助