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模块,否则不会展示
layui select下拉菜单联动的更多相关文章
- jQuery插件:模拟select下拉菜单
没搞那么复杂,工作中,基本够用.. <!doctype html> <html> <head> <meta charset="utf-8" ...
- layui select 下拉框 级联 动态赋值 与获取选中值
//下拉框必须在 class="layui-form" 里 不然监听事件没有作用 <div class="layui-form" > <div ...
- Jenkins配置下拉菜单联动效果
在使用Jenkins集成时,经常需要配置一些环境信息,由于测试.线上.预发布需要切换环境和域名,需要在Jenkins中配置下拉菜单联动效果. 首先选择参数化构建过程,然后首先配置环境,环境分为:测试环 ...
- jQuery 前端复选框 全选 反选 下拉菜单联动
jQuery 页面中复选框全选.反选.下拉联动(级联) <!DOCTYPE html> <html lang="en"> <head> < ...
- select 下拉菜单Option对象使用add(elements,index)方法动态添加
原生js 的add函数为下拉菜单增加选项 1.object.add(oElement [, iIndex]) index 可选参数:指定元素放置所在的索引号,整形值.如果没有指定值,将添加到集合的最后 ...
- select下拉菜单反显不可改动,且submit能够提交数据
首先通过后台funcA()将下拉菜单反显不可改动的数据response到disable.jsp页面,disable.jsp: <script> var data1=${result.obj ...
- 手写的select 下拉菜单
我们在进行表单设计时,可能要用到select下拉选项控件,遗憾的是,IE浏览器默认的select控件外观非常丑陋,而且不能用样式来控制,不能在选项中添加图片等信息.今天我将通过实例来讲解如何用CSS和 ...
- OAF实现下拉菜单联动
当需要输入多个下拉菜单选项时,可能某些下拉菜单是有级联关系的.这时候就需要使用级联的下拉菜单来解决.下面的教程将介绍如何使用ppr制作级联下拉菜单 一.新建AM 在test.oracle.apps.c ...
- 使用JQUERY的flexselect插件来实现将SELECT下拉菜单变成自动补全输入框
这也是下拉列表太长了之后,使用的同事提出来的意见, 然后,本来开始想将DJANGO的那个后台下拉菜单移植过来的,但发现不现实,也麻烦, 就找了几个JQUERY的插件测试了一下,最后选中了flexsel ...
随机推荐
- 2层感知机(神经网络)实现非线性回归(非线性拟合)【pytorch】
import torch import numpy import random from torch.autograd import Variable import torch.nn.function ...
- 数据库SQL---数据库、基本表、视图、索引的定义、修改、删除
1.SQL(结构化查询语言)的组成:数据定义语言DDL.数据操纵语言DML.数据控制语言DCL.其他. 2.SQL语言的功能: 1)数据查询:SELECT 2)数据定义:CREATE DROP ...
- 飞机大战-面向对象-pygame
飞机大战 最近学习了python的面向对象,对面向对象的理解不是很深刻. 面向对象是数据和函数的'打包整理',将相关数据和处理数据的方法集中在一个地方,方便使用和管理. 本着学习的目的,在网上找了这个 ...
- Netty(七):EventLoop学习前导——Reactor模式
了解Netty的人多少都会知道Netty的高性能的一个原因就是它是基于事件驱动的,而这一事件的原型就是Reactor模式. 所以在学习EventLoop前,很有必要先搞懂Reactor模式. 本文目录 ...
- 算法竞赛进阶指南--在单调递增序列a中查找小于等于x的数中最大的一个(即x或x的前驱)
在单调递增序列a中查找<=x的数中最大的一个(即x或x的前驱) while (l < r) { int mid = (l + r + 1) / 2; if (a[mid] <= x) ...
- CF--思维练习--CodeForces - 220C Little Elephant and Shifts (STL模拟)
ACM思维题训练集合 The Little Elephant has two permutations a and b of length n, consisting of numbers from ...
- Flutter 打包Android APK 笔记与事项
获取一个KEY 首先要获取 你的 打包应用的一个 key ,这一步其实和 在AndroidStudio 上打包 APK 一样,都是要注册一个本地的 key,key 其实也就是 jks文件啦. 如果已经 ...
- centos8-django项目部署 nginx+uwsgi
1.虚拟环境virtualenv安装 1.安装virtualenv pip3 install virtualenv 2.创建目录,把项目文件传过来 mkdir My cd My 3.创建独立运行环境- ...
- Java——Java中编码问题
在开发过程中经常会遇到一会乱码问题,不是什么大问题,但是也挺烦人的,今天来将我们开发总结的经验记录下来,希望可以给大家一些帮助. 一些概念: 字符:人们使用的记号,抽象意义上的一个符号.比如:‘1’, ...
- Java——字节和字符的区别
字节 1.bit=1 二进制数据0或1 2.byte=8bit 1个字节等于8位 存储空间的基本计量单位 3.一个英文字母=1byte=8bit 1个英文字母是1个字节,也就是8位 4.一个汉字= ...