layui的select联动实现代码
时间:2019-09-29
本文章向大家介绍layui的select联动实现代码,主要包括layui的select联动实现代码使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
要实现联动效果注意两点:
第一要可以监听到select的change事件;
第二异步加载的内容,需要重新渲染后才可以 正常使用。
html结构:
<form class="layui-form batchinput-form" action="" id="box-form"> <div class="layui-form-item" > <div class="layui-input-inline"> <label class="layui-form-label">所在省份:</label> <div class="layui-input-block" > <select name="province" id="province" lay-filter="myselect"> <option value="">请选择省份</option> <#list province as provincelist> <option value="${provincelist.areaId}">${provincelist.fullname}</option> </#list> </select> </div> </div> </div> <div class="layui-form-item"> <div class="layui-input-inline"> <label class="layui-form-label">所在城市 :</label> <div class="layui-input-block"> <select name="City" id="City" lay-filter="myselect2" > </select> </div> </div> </div> <div class="layui-form-item"> <div class="layui-input-inline"> <label class="layui-form-label">所在区域 :</label> <div class="layui-input-block"> <select name="Area" id="Area" lay-filter="myselect3"> </select> </div> </div> </div> </form>
js:
layui.use(['layer', 'form'], function(){ var layer = layui.layer ,form = layui.form; form.on('select(myselect)', function(data){ var areaId=(data.value).replaceAll(",",""); $.ajax({ type: 'POST', url: '/shopInfo/findCity', data: {areaId:areaId}, dataType: 'json', success: function(data){ $("#City").html(""); $.each(data, function(key, val) { var option1 = $("<option>").val(val.areaId).text(val.fullname); $("#City").append(option1); form.render('select'); }); $("#City").get(0).selectedIndex=0; } }); }); });
1.select的chage监听事件使用
form.on('select(myselect)', function(data){}) 其中myselect是select的 lay-filter属性值
2.数据异步加载到select的option中之后,点击该select会发现layui的选中效果不起作用,需要使用form.render('select');重新渲染一次,就可以正常使用。
以上这篇layui的select联动实现代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
- 11.3/11.4/11.5 MySQL安装
- Greenrobot-EventBus源码学习(六)
- Greenrobot-EventBus源码学习(五)
- writeup分享 | 近期做的比较好的web
- Greenrobot-EventBus源码学习(四)
- Linux基础(day38)
- EventBus 源码学习笔记(三)
- 10.35 screen工具
- 10.34 linux系统日志
- 10.32/10.33 rsync通过服务同步
- 适合破解新手的160个crackme练手之03
- EventBus源码学习笔记(二)
- 11.10/11.11/11.12 安装PHP5
- 领读《深入浅出NODEJS》—第二章 模块机制
- 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 数组属性和方法
- 自己动手实现4大免费聊天机器人:小冰、图灵、腾讯、青云客
- Android Spinner下拉框的基本使用
- hadoop本地运行的两个案例。官方Grep案例、官方WordCount案例。
- 腾讯智能闲聊机器人详细开发教程
- 用PyTorch实现MNIST手写数字识别(非常详细)
- 手把手教你从零开始用Java写爬虫
- STM32 cjson的GBK/UTF-8/UNICODE转换、显示中文、GBK字库
- 都说Linux很重要,你会几个Linux命令?来看看这道面试题目。
- 使用VisualGDB将Keil项目导入VisualStudio
- 小白学图像 | Group Normalization详解+PyTorch代码
- 使用VisualGDB开发Keil MDK-ARM项目
- 保姆级教程:还愁不会搭建伪分布式吗?(其实很简单)
- 如何使用OpenCV RTMP直播推流
- Scrapy框架新手入门教程
- STM32 F4串口接收中断