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模塊,否則不會展示

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM