基于layui的select区域联动
2019独角兽企业重金招聘Python工程师标准>>>
基于layui的select区域联动
要实现联动效果注意两点:
第一要可以监听到select的change事件;
第二异步加载的内容,需要重新渲染后才可以 正常使用。
Html结构:
<div class="x-body"><form class="layui-form" action="" method="post"><div class="layui-form-item"><label class="layui-form-label">选择地区</label><div class="layui-input-inline"><select name="province" lay-filter="province" id="s_p"><option value="1">请选择省</option></select></div><div class="layui-input-inline"><select name="city" lay-filter="city" id="s_c"><option value="1">请选择市</option></select></div><div class="layui-input-inline"><select name="area" lay-filter="area" id="s_x"><option value="1">请选择区/县</option></select></div></div><div><label class="layui-form-label">选择地区</label><div class="layui-input-inline"><select name="towns" lay-filter="towns" id="s_t"><option value="1">请选择乡镇/街道</option></select></div><!--<div class="layui-input-inline">--><!--<select name="burg" lay-filter="burg" id="s_b">--><!--<option value="1">庄/村</option>--><!--</select>--><!--</div>--></div></form>
</div>
Js:
<script type="text/javascript">layui.use(['form', 'layer', 'laytpl', 'jquery'], function () {var form = layui.form, $ = layui.jquery;var parentId = '0';$(function () {$.post(serverPath + "sys/area/backProvince/" + parentId, function (result) {var p = result;for (v in p) {var pp = p[v].id;$("#s_p").append("<option value=" + pp + ">" + p[v].fullname + "</option>")}form.render();})form.on('select(province)', function (data) {var p = $("#s_p").val();if (p != "1") {$.post(serverPath + "sys/area/backProvince/" + p, function (result) {var c = result;$("#s_c").html("");$("#s_c").append("<option value='1'>请选择市</option>");$("#s_x").html("");$("#s_x").append("<option value='1'>请选择县/区</option>");$("#s_t").html("");$("#s_t").append("<option value='1'>请选择乡镇/街道</option>");$("#s_b").html("");$("#s_b").append("<option value='1'>请选择村/街道号</option>");for (v in c) {var cc = c[v].id;$("#s_c").append("<option value=" + cc + ">" + c[v].fullname + "</option>")}form.render();})}});form.on('select(city)', function (data) {var c = $("#s_c").val();if (c != "1") {$.post(serverPath + "sys/area/backProvince/" + c, function (result) {var x = result;$("#s_x").html("");$("#s_x").append("<option value='1'>请选择县/区</option>");$("#s_t").html("");$("#s_t").append("<option value='1'>请选择乡镇/街道</option>");$("#s_b").html("");$("#s_b").append("<option value='1'>请选择村/街道号</option>");for (v in x) {var xx = x[v].id;$("#s_x").append("<option value=" + xx + ">" + x[v].fullname + "</option>")}form.render();});}});form.on('select(area)', function (data) {var x = $("#s_x").val();if (x != "1") {$.post(serverPath + 'sys/area/backProvince/'+ x, function (result) {var t = result;$("#s_t").html("");$("#s_t").append("<option value='1'>请选择乡镇/街道</option>");$("#s_b").html("");$("#s_b").append("<option value='1'>请选择村/街道号</option>");for (v in t) {var xx = t[v].id;$("#s_t").append("<option value=" + xx + ">" + t[v].fullname + "</option>")}form.render();});}});});});</script>
总结:
1.select的chage监听事件使用
form.on('select(myselect)', function(data){}) 其中myselect是select的 lay-filter属性值
2.数据异步加载到select的option中之后,点击该select会发现layui的选中效果不起作用,需要使用form.render('select');重新渲染一次,就可以正常使用。
转载于:https://my.oschina.net/zhenggao/blog/1818602
基于layui的select区域联动相关推荐
- 基于layui 2.*省市级三级联动
不bb,直接上代码,复制后替换layui.css和layui.js可直接使用 <!DOCTYPE html> <html> <head><meta chars ...
- 基于layui的省市区三级联动
效果如下: 代码如下: <!DOCTYPE html> <html> <head><meta charset="utf-8">< ...
- 基于layui的省市区三级联动(数据交互)
项目中用到了省市区三级联动的一个效果 于是借助layui的下拉框和回调,用ajax请求完成动态的省市区三级联动 话不多说上代码 html代码: <div class="labcon l ...
- layui表单的ajax联动,layui的select联动实现代码
要实现联动效果注意两点: 第一要可以监听到select的change事件: 第二异步加载的内容,需要重新渲染后才可以 正常使用. html结构: 所在省份: 请选择省份 ${provincelist. ...
- 基于layui实现的省市县区三级联动下拉选择器
基于layui实现的省市县区三级联动下拉选择器 关于layui 这里不做介绍,直戳我阅读 关于本省市区级联下拉选择器 本选择器已经将它封装成一个layui的插件,使用起来非常方便,支持一个页面中使用多 ...
- vue基于element-ui的Select选择器实现的动态多级联动下拉选择
本文讲的是 vue基于 element-ui 的 Select选择器 实现的动态多级联动下拉选择 基于原生select标签实现请看我的另外一篇文章 vue实现动态多级联动选择 本文demo地址 代码如 ...
- layui table reload post请求_基于Layui组件封装的后台模版
HG框架简介 HG-Layui-UI框架,是基于layui最新版UI搭建的一套通用后台管理框架,借鉴了市面上各大主流框架风格,采用iframe标签页实现,保留了传统开发模式的简单实用性. 为快速开发减 ...
- 基于layui的动态添加条件查询ui插件
layuiExtend 项目介绍 最近做一个档案系统,发现字段超多,查询页面布局不是很好弄,于是就想着干脆写一个动态添加条件的ui插件. 因为是用的layui框架写的系统,所以就直接基于layui编写 ...
- PHP数据layui表格,基于layui和thinkphp数据表格的数据接口,layui表格局部刷新
基于layui和thinkphp数据表格的数据接口基于获得和框架数据表格的数据接口,接口程序部分,来源于网络图,但很有用 前端URL : '/管理员.PHP/文章/列表' 后端 公共e函数列表(){ ...
最新文章
- OpenWebSpider 安装使用
- EditText禁止输入回车
- centos7防火墙开放端口
- [转]iOS为UILabel添加长按复制功能
- 关于python pdb的描述_The python debugger(PDB)的简介
- 趣说游戏AI开发:对状态机的褒扬和批判
- 累计增量备份策略_数据安全与备份解决方案ZDLRA快速恢复
- 数据分析学习笔记-数据分析预备知识
- Android窗口管理(2)——消息传递
- python win32转pdf 横版_Python调用Win32com实现Office批量转PDF
- Moto me525+ 刷机
- 绿色数据中心基础设施建维服务认证
- 张鸣:大学风气是怎样堕落的?
- MyBatis一发入魂(一)
- 自我复盘-20210820
- scrollToBottom
- Python爬取网易云各类音乐的详细信息
- 企业级nginx使用
- Teamview后台近期被APT41攻破,解决方案
- 【每日一读】Dynamic Structural Role Node Embedding for User Modeling in Evolving Networks
热门文章
- html css important,css中的important是什么意思?
- kafka 消费者消息确认_Kafka整体架构图解
- 【异常:Could not resolve】react-native run-android
- 解决RecyclerView瀑布流效果结合Glide使用时图片变形的问题
- ios 代码截屏模糊问题解决办法
- Jenkins持续发布解决方案
- webview重新加载(reload)或者发起 redirect request导致js和objc代码之间的bridge失联解决方案(亲测有效)
- OpenCV imread读取图片,imshow展示图片,出现cv:Exception at memory location异常
- 老电脑应该怎么重装系统比较好
- python36.dll下载_python36.dll