做的比較簡單,先從后台直接把第一級菜單輸出,然后點擊二級菜單的時候再動態展示
<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模塊,否則不會展示