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数据的
以上两种方法,希望对大家有帮助