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