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

<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下拉菜单联动的更多相关文章

  1. jQuery插件:模拟select下拉菜单

    没搞那么复杂,工作中,基本够用.. <!doctype html> <html> <head> <meta charset="utf-8" ...

  2. layui select 下拉框 级联 动态赋值 与获取选中值

    //下拉框必须在 class="layui-form" 里 不然监听事件没有作用 <div class="layui-form" > <div ...

  3. Jenkins配置下拉菜单联动效果

    在使用Jenkins集成时,经常需要配置一些环境信息,由于测试.线上.预发布需要切换环境和域名,需要在Jenkins中配置下拉菜单联动效果. 首先选择参数化构建过程,然后首先配置环境,环境分为:测试环 ...

  4. jQuery 前端复选框 全选 反选 下拉菜单联动

    jQuery 页面中复选框全选.反选.下拉联动(级联) <!DOCTYPE html> <html lang="en"> <head> < ...

  5. select 下拉菜单Option对象使用add(elements,index)方法动态添加

    原生js 的add函数为下拉菜单增加选项 1.object.add(oElement [, iIndex]) index 可选参数:指定元素放置所在的索引号,整形值.如果没有指定值,将添加到集合的最后 ...

  6. select下拉菜单反显不可改动,且submit能够提交数据

    首先通过后台funcA()将下拉菜单反显不可改动的数据response到disable.jsp页面,disable.jsp: <script> var data1=${result.obj ...

  7. 手写的select 下拉菜单

    我们在进行表单设计时,可能要用到select下拉选项控件,遗憾的是,IE浏览器默认的select控件外观非常丑陋,而且不能用样式来控制,不能在选项中添加图片等信息.今天我将通过实例来讲解如何用CSS和 ...

  8. OAF实现下拉菜单联动

    当需要输入多个下拉菜单选项时,可能某些下拉菜单是有级联关系的.这时候就需要使用级联的下拉菜单来解决.下面的教程将介绍如何使用ppr制作级联下拉菜单 一.新建AM 在test.oracle.apps.c ...

  9. 使用JQUERY的flexselect插件来实现将SELECT下拉菜单变成自动补全输入框

    这也是下拉列表太长了之后,使用的同事提出来的意见, 然后,本来开始想将DJANGO的那个后台下拉菜单移植过来的,但发现不现实,也麻烦, 就找了几个JQUERY的插件测试了一下,最后选中了flexsel ...

随机推荐

  1. Linux 常用到的命令

    1.按照文件所有属用户和名字查询 find -user mpsp -name \*.bin 2.根据string 字符串查找内容 more +/string test.txt 3.查找文件尾部 后20 ...

  2. 通过 Swoole\Table 实现 Swoole 多进程数据共享

    第三方存储媒介 前面我们介绍了基于 Swoole 的 Process 及 Process\Pool 模块在 PHP 中实现多进程管理,但是多进程模式下进程间是相互隔离的,无法共享数据和变量,即便是通过 ...

  3. MySQL 50题练习

    表名和字段 –1.学生表 Student(s_id,s_name,s_birth,s_sex) –学生编号,学生姓名, 出生年月,学生性别 –2.课程表 Course(c_id,c_name,t_id ...

  4. DEV gridview 合并单元格

    private void gv_docargo_CellMerge(object sender, DevExpress.XtraGrid.Views.Grid.CellMergeEventArgs e ...

  5. react: typescript toastr

    import toastr @types/toastr toastr.ts import * as toastr from "toastr" toastr.option.posit ...

  6. Java 使用正则表达式和IO实现爬虫以及503解决

    我这边找了个小说网站: 基本套路: 第一步:获取小说每一章的url地址 第二步:获取章节url内容并使用正则表达式提取需要的内容 第三步:多线程封装,实现如下效果 最后测试. 代码: 内容获取封装: ...

  7. SpringBoot【新手学习记录篇】

    1. 启动方式: 在idea中的application.java右键run as 命令行进入项目目录,使用命令 mvn spring-boot:run 使用mvn install进行打包,然后进入ta ...

  8. c++<ctime>中常用函数

    先说一下c++标准库并没有提供所谓的日期类型,而是继承了c的日期类型 <cmath>里面有些常用的函数,比如计时函数clock().获取系统时间的函数time(),下面就具体的介绍一下 1 ...

  9. Deepin15.11-mysql5.7安装与配置

    目录 1.卸载 2.换源 3.安装mysql-5.7并修改密码 4.修改mysql中字符编码 deepin系统中,默认的系统源,使用apt-get install mysql-server会自动拉取m ...

  10. PSD转HTML

    随着时间的推移,技术的进步,越来越多的人也越来越熟悉HTML和CSS以及不同的技术来将 Photoshop 设计转换成 HTML 或 CSS 格式.对于一个设计师或网页开发人员,知道如何将PSD文件转 ...