layui的select联动实现代码


Posted in Javascript onSeptember 28, 2019

要实现联动效果注意两点:

第一要可以监听到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联动实现代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js类 from qq
Nov 13 Javascript
javascript模拟实现C# String.format函数功能代码
Nov 25 Javascript
javascript原生和jquery库实现iframe自适应高度和宽度
Jul 18 Javascript
javascript实现动态导入js与css等静态资源文件的方法
Jul 25 Javascript
JavaScript中style.left与offsetLeft的使用及区别详解
Jun 08 Javascript
js利用正则表达式检验输入内容是否为网址
Jul 05 Javascript
JavaScript性能优化之函数节流(throttle)与函数去抖(debounce)
Aug 11 Javascript
AngularJS实现Input格式化的方法
Nov 07 Javascript
js实现简易垂直滚动条
Feb 22 Javascript
jQury Ajax使用Token验证身份实例代码
Sep 22 Javascript
微信小程序 POST请求的实例详解
Sep 29 Javascript
详解key在Vue列表渲染时究竟起到了什么作用
Apr 20 Javascript
关于layui的下拉搜索框异步加载数据的解决方法
Sep 28 #Javascript
layui的数据表格+springmvc实现搜索功能的例子
Sep 28 #Javascript
layui下拉列表select实现可输入查找的方法
Sep 28 #Javascript
解决layui下拉框监听问题(监听不到值的变化)
Sep 28 #Javascript
使用layui监听器监听select下拉框,事件绑定不成功的解决方法
Sep 28 #Javascript
layer.confirm()右边按钮实现href的例子
Sep 27 #Javascript
layer页面跳转,获取html子节点元素的值方法
Sep 27 #Javascript
You might like
PHP连接和操作MySQL数据库基础教程
2014/09/29 PHP
PHP中ini_set与ini_get用法实例
2014/11/04 PHP
Symfony数据校验方法实例分析
2015/01/26 PHP
laravel-admin 在列表页添加自定义按钮的例子
2019/09/30 PHP
PHP isset()及empty()用法区别详解
2020/08/29 PHP
PHP http请求超时问题解决方案
2020/11/13 PHP
zShowBox 图片放大展示jquery版 兼容性
2011/09/24 Javascript
js控制当再次点击按钮时的间隔时间
2014/06/03 Javascript
详谈javascript精度问题与调整
2017/07/08 Javascript
js中apply与call简单用法详解
2017/11/06 Javascript
用最少的JS代码写出贪吃蛇游戏
2018/01/12 Javascript
微信小程序表单验证form提交错误提示效果
2020/06/19 Javascript
使用taro开发微信小程序遇到的坑总结
2019/04/08 Javascript
如何从头实现一个node.js的koa框架
2019/06/17 Javascript
python中map()与zip()操作方法
2016/02/27 Python
python 读取视频,处理后,实时计算帧数fps的方法
2018/07/10 Python
python入门之井字棋小游戏
2020/03/05 Python
详解HTML5中div和section以及article的区别
2015/07/14 HTML / CSS
HTML5地理定位_动力节点Java学院整理
2017/07/12 HTML / CSS
HTML5自定义元素播放焦点图动画的实现
2019/09/25 HTML / CSS
Vision Direct比利时:在线订购隐形眼镜
2019/08/27 全球购物
旅游管理本科生求职信
2013/10/14 职场文书
计算机应用专业应届毕业生中文求职信范文
2013/11/29 职场文书
教师职称自我鉴定
2014/02/12 职场文书
入股协议书
2014/04/14 职场文书
绿色环保演讲稿
2014/05/10 职场文书
硕士研究生就业推荐信
2014/05/18 职场文书
岗位安全生产责任书
2014/07/28 职场文书
毕业证丢失证明范本
2014/09/20 职场文书
优秀党员先进事迹材料
2014/12/18 职场文书
62句有关感恩节文案(推荐收藏)
2019/11/28 职场文书
读后感怎么写?书写读后感的基本技巧!
2019/12/10 职场文书
.Net Core导入千万级数据至Mysql的步骤
2021/05/24 MySQL
vue+springboot实现登录验证码
2021/05/27 Vue.js
豆瓣2021评分最高动画剧集-豆瓣评分最高的动画剧集2021
2022/03/18 日漫
CSS的calc函数用法小结
2022/06/25 HTML / CSS