js 二级联动
时间:2019-09-25
本文章向大家介绍js 二级联动,主要包括js 二级联动使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
<select name="provid" id="A1" lay-filter="provid"> <option value="">请选择省</option> <option value="110000" selected="selected">北京</option> <option value="120000">天津</option> <option value="130000">河北省</option> <option value="140000">山西省</option> <option value="700000">港澳台地区</option> </select> layui 自动生成 绑定事件 layui.use('form', function () { var form = layui.form; form.on('select(A1)', function (data) { //绑定改变事件 alert("0000"); //绑定不到 }) form.on('select(provid)', function (data) { //绑定改变事件 alert("111"); //----ok }) }); //二级联动返回的json public class Two_level_linkage { public Two_leavel_head head { get; set; } public List<Two_leavel_head> items { get; set; } } public class Two_leavel_head { public int id { get; set; } public string name { get; set; } } List 控制器 var busitype_list = busiTypesdb.GetList(); var hFeven_list = hFEventInfodb.GetList(); List<Two_level_linkage> list = new List<Two_level_linkage>(); for (int i = 0; i < busitype_list.Count; i++) { Two_level_linkage mode = new Two_level_linkage(); mode.head = new Two_leavel_head(); mode.items = new List<Two_leavel_head>(); mode.head.id = busitype_list[i].BusiTypesID; mode.head.name = busitype_list[i].BusiTypesName; for (int j = 0; j < hFeven_list.Count; j++) { if (busitype_list[i].BusiTypesID == hFeven_list[j].BusiTypeID) { Two_leavel_head modeL = new Two_leavel_head(); modeL.id = hFeven_list[j].HFEventId; modeL.name = hFeven_list[j].HFEventName; mode.items.Add(modeL); } } list.Add(mode); } ViewBag.Content = JsonHelper.GetJson(list); //[] //[{"city":null,"name":"123"}] Js 解析 layui.use('form', function () { var form = layui.form; form.on('select(provid_A1)', function (data) { //绑定改变事件 var B1 = document.getElementById("B1"); B1.innerHTML = ""; var C1 = document.getElementById("list_busi").value; var ob = JSON.parse(C1); var t = this.getAttribute("lay-value"); bind_data(t); }) }); //-----------bgin---------------------- var obj_data; //初始化数据 联动 function bind_data(index) { if (!index) { //获得数据 var C1 = document.getElementById("list_busi").value; var ob = JSON.parse(C1); obj_data = ob; var i = 0; j = 0; var sb = new StringBuilder(); for (; i < ob.length; i++) { if (i == 0) //默认选择第一个 { sb.appendFormat('<option value="{0}" selected="selected">{1}</option>', ob[i].head.id, ob[i].head.name); inset_html("B1", get_child(ob[i].head.id, obj_data)); continue; } sb.appendFormat('<option value="{0}">{1}</option>', ob[i].head.id, ob[i].head.name); } inset_html("A1", sb.toString()); } else { inset_html("B1", get_child(index, obj_data)); } //插入数据 function inset_html(id, content) { if (!content) { content = '<option value="">无数据</option>'; }; document.getElementById(id) && (document.getElementById(id).innerHTML = content); } //获得子项内容 function get_child(id, ob) { var i = 0; j = 0; var sb = new StringBuilder(); for (; i < ob.length; i++) { if (id == ob[i].head.id) { for (; j < ob[i].items.length; j++) { if (j == 0) { sb.appendFormat('<option value="{0}" selected="selected">{1}</option>', ob[i].items[j].id, ob[i].items[j].name); continue; } sb.appendFormat('<option value="{0}" >{1}</option>', ob[i].items[j].id, ob[i].items[j].name); } break; } } return sb.toString(); } var form = layui.form; form.render(); } //--------end---------------------
原文地址:https://www.cnblogs.com/enych/p/11585106.html
- Oracle数据库(一)概述、基础与简单操作
- Oracle数据库(二)常用关键字以及函数
- Oracle数据库(三)表操作,连接查询,分页
- 正式学习第一天下午——基础标签及其属性
- 正式学习第二天上午——常用标签及列表 0605
- Java之面向对象例子(三) 多态,重写,重载,equals()方法和toString()方法的重写
- Java之IO流补充
- JavaWeb 例子 JDBC+JSP登陆注册留言板
- 基于bro的计算机入侵取证实战分析
- 如何用HERCULES绕过杀软
- 纯JSP实现用户登录注册,记事本
- Java常见问题
- JavaWeb(一)JSP原理,组成
- JavaWeb(二)jsp运行原理,九大内置对象
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Angular应用一个创建场景的问题分析
- WPF 最简逻辑实现多指顺滑的笔迹书写
- WPF 如何确定应用程序开启了 Pointer 触摸消息的支持
- Hexo-Matery主题美化
- uniapp onPullDownRefresh 下拉刷新小坑
- Windows服务器常用配置
- SAP CRM订单数据库表CRMD_SHIPPING的填充原理
- 使用art-template模板引擎渲染数据
- SAP CRM索引数据库表CRMD_ORDER_INDEX的更新原理
- 将自己的nodeJS项目分享到npm上
- react中使用prop-types检测props数据类型
- git的常用命令及工作中冲突问题解决方法
- 关于react中的context
- 基于Node.js的Express框架
- react官方推荐的classnames库