layui select下拉菜单联动
做的比较简单,先从后台直接把第一级菜单输出,然后点击二级菜单的时候再动态展示
<div class="layui-inline"> <label class="layui-form-label">商品类别</label> <div class="layui-input-inline"> <select name="interest" lay-filter="one_cate"> <option value="">请选择</option> {volist name="list" id="vo"} <option value="{$vo.cate_id}">{$vo.cate_name}</option> {/volist} </select> </div> <div class="layui-input-inline"> <select name="interest" lay-filter="aihao" id="two_cate"> </select> </div> </div>
form.on('select(one_cate)', function(data){ //data.value 得到被选中的值 var url = '/admin/category/selec/' + data.value; $.get(url,function(data){ $("#two_cate").empty(); $("#two_cate").append(new Option("请选择分类","")); $.each(data,function(index,item){ $("#two_cate").append(new Option(item,index)); console.log(index,item); }); layui.form.render("select"); }); });
重点就两个
1.$("#two_cate").append(new Option(item,index));将遍历的数据插入到select中,比原来的拼接字符串省事。
2.layui.form.render("select");重载select模块,否则不会展示