码迷,mamicode.com
首页 > 其他好文 > 详细

layui select下拉菜单联动

时间:2019-09-20 19:19:07      阅读:107      评论:0      收藏:0      [点我收藏+]

标签:app   javascrip   asc   选择   展示   _id   lis   拼接   div   

做的比较简单,先从后台直接把第一级菜单输出,然后点击二级菜单的时候再动态展示

<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下拉菜单联动

标签:app   javascrip   asc   选择   展示   _id   lis   拼接   div   

原文地址:https://www.cnblogs.com/dayin1/p/11558824.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!