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

<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. .NET Core 初识

    什么是 ASP.NET Core? ASP.NET Core 是一个新的开源和跨平台的框架,用于构建如 Web 应用.物联网(IoT)应用和移动后端应用等连接到互联网的基于云的现代应用程序.ASP.N ...

  2. Mac剪切板中的PNG保存到文件swift

    SwiftGG 教程大全 中文翻译 命令行工具开发教程 Line Programs on macOS Tutorial swift4,较详细 Swift基础中需要注意的点 NSPasteboard M ...

  3. shift count is too large

    STM8S是8 bit单片机在STM8S中 unsigned long是32位, unsigned short和unsigned int都是16位,unsigned char是8位. 以以下代码编译时 ...

  4. python入门学习之Python爬取最新笔趣阁小说

    Python爬取新笔趣阁小说,并保存到TXT文件中      我写的这篇文章,是利用Python爬取小说编写的程序,这是我学习Python爬虫当中自己独立写的第一个程序,中途也遇到了一些困难,但是最后 ...

  5. beego rel/reverse

    用户可以发布多个文章 对用户来说是一对多 对文章来说是多对一 用户是主表 文章是用户的从表 rel用在从表中,给主表结构体设置主键,也就是文章表对应用户表的外键 reverse用在主表中,指定主表与从 ...

  6. Spring Boot JPA中java 8 的应用

    文章目录 Optional Stream API CompletableFuture Spring Boot JPA中java 8 的应用 上篇文章中我们讲到了如何在Spring Boot中使用JPA ...

  7. Tomcat实现Session复制

    Tomcat实现Session复制 需要三台虚拟机一台Nginx两台Tomcat 关闭相关的安全机制 systemctl stop firewalldiptables -Fsetenforce 0 首 ...

  8. C语言实现数组循环左移

    c语言实现数组左移: 例如输入: 8 3 1 2 3 4 5 6 7 8 输出: 4 5 6 7 8 1 2 3 #include <stdio.h> int main(int argc, ...

  9. Codeforces Round #618 (Div. 2)-Non-zero

    Guy-Manuel and Thomas have an array a of n integers [a1,a2,-,an]. In one step they can add 1 to any ...

  10. Redis为什么是单线程的

    一.前言   最近在学习Redis,这篇文章就来简单聊聊一道常考的面试题--Redis为什么是单线程的.废话不多说,直接开始吧. 二.正文 2.1 为什么需要多线程   首先,现在的CPU一般都是由多 ...