zoukankan      html  css  js  c++  java
  • 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模块,否则不会展示

     

  • 相关阅读:
    鼠标经过时背景颜色变化
    鼠标经过时弹出下拉菜单
    运行最新创建的镜像:
    docker 保存更改的镜像:
    docker 导入下载模板
    docker导入本地镜像
    docker 创建镜像
    Docker 基于已有镜像的容器创建镜像
    14.2.3 InnoDB Redo Log
    14.2.3 InnoDB Redo Log
  • 原文地址:https://www.cnblogs.com/dayin1/p/11558824.html
Copyright © 2011-2022 走看看