layui select下拉菜单联动
Posted dayin1
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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模块,否则不会展示
以上是关于layui select下拉菜单联动的主要内容,如果未能解决你的问题,请参考以下文章
layui 表单 select 下拉菜单 怎么设置第二个为加载选中默认值