基于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:
总结:
1、select的chage监听事件使用
form.on('select(myselect)', function(data){}) 其中myselect是select的 lay-filter属性值
2、数据异步加载到select的option中之后,点击该select会发现layui的选中效果不起作用,需要使用form.render('select');重新渲染一次,就可以正常使用。
更多layui知识请关注PHP中文网layui教程栏目
以上就是基于layui实现select区域联动的详细内容,更多请关注php中文网其它相关文章!
微信分享相关标签:layui本文转载于:oschina,如有侵犯,请联系a@php.cn删除上一篇:layui实现登录功能的方法下一篇:layui弹出层闪退解决相关文章
相关视频
layui open更改按钮的颜色layui关联表单的方法layui实现点击按钮添加一行的方法layui时间控件选择时间基于layui实现select区域联动layUI框架模块化架构特点layui的介绍与安装菜单管理页面(layui表格+表单)网友评论
文明上网理性发言,请遵守 新闻评论服务协议
我要评论立即提交专题推荐独孤九贱-php全栈开发教程全栈 100W+
主讲:Peter-Zhu 轻松幽默、简短易学,非常适合PHP学习入门
玉女心经-web前端开发教程入门 50W+
主讲:灭绝师太 由浅入深、明快简洁,非常适合前端学习入门
天龙八部-实战开发教程实战 80W+
主讲:西门大官人 思路清晰、严谨规范,适合有一定web编程基础学习
作者信息尚
认证0级讲师
最近文章go语言中的结构体与方法详解29810种java数组常用的方法844python中5种连接字符串的方法587发布技术文章最新文章热门排行使用LayUI实现前端分页功能Layui连接mysql操作CRUDlayui弹出层闪退解决基于layui实现select区域联动layui实现登录功能的方法layui时间控件选择时间详解layuiAdmin单页版根据后台json数据动态生成左侧菜单栏layui实现点击按钮添加一行的方法layui框架的优点和缺点是什么layui如何使用按钮事件layui列表怎么取input框的值layui怎么用layui导入导出Excel方法layui标签输入框inputTags介绍Layui时间选择框介绍layui表格怎么把表头固定推荐视频教程layUI前端框架使用详解前端UI框架 — layui视频教程分类php视频教程html视频教程css视频教程JS视频教程jQuery视频教程mysql视频教程Linux视频教程Python视频教程article_status = 469925;网站首页 PHP视频PHP实战PHP代码PHP手册词条手记编程词典php中文网:公益在线php培训,帮助PHP学习者快速成长! 合肥彼岸互联信息技术有限公司
Copyright 2014-2020 https://www.php.cn/ All Rights Reserved | 皖B2-20150071-9 皖公网安备 34010402701654号 关于我们免责申明赞助与捐赠广告合作
座机号码:0551-64933227 安徽省合肥市政务新区置地广场D座2101
var _hmt = _hmt || [];(function(){var hm = document.createElement("script");hm.src="//hm.baidu.com/hm.js?8cc45d54c337ca616c34b1cf747da91c";var s=document.getElementsByTagName("script")[0];s.parentNode.insertBefore(hm, s);})();(function(){var bp = document.createElement('script');var curProtocol = window.location.protocol.split(':')[0];if(curProtocol === 'https'){bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';}else{bp.src = 'http://push.zhanzhang.baidu.com/push.js';};var s = document.getElementsByTagName("script")[0];s.parentNode.insertBefore(bp, s);})();$('.content').viewer(); 特别申明:本文内容来源网络,版权归原作者所有,如有侵权请立即与我们联系(cy198701067573@163.com),我们将及时处理。