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 相关文章推荐
为Extjs加加速(javascript加速)
Aug 19 Javascript
js异常捕获方法介绍
Apr 10 Javascript
javascript自然分类法算法实现代码
Oct 11 Javascript
Javascript中的apply()方法浅析
Mar 15 Javascript
javascript去掉代码里面的注释
Jul 24 Javascript
jQuery实现表单步骤流程导航代码分享
Aug 28 Javascript
基于insertBefore制作简单的循环插空效果
Sep 21 Javascript
原生js实现无限循环轮播图效果
Jan 20 Javascript
jQuery导航条固定定位效果实例代码
May 26 jQuery
浅谈JS函数节流防抖
Oct 18 Javascript
Vue不能检测到Object/Array更新的情况的解决
Jun 26 Javascript
JS数据类型分类及常用判断方法
Nov 19 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中进行身份认证
2006/10/09 PHP
php中看实例学正则表达式
2006/12/25 PHP
学习php分页代码实例
2013/10/24 PHP
PHP上传图片类显示缩略图功能
2016/06/30 PHP
PHP实现登陆表单提交CSRF及验证码
2017/01/24 PHP
PHP使用pdo连接access数据库并循环显示数据操作示例
2018/06/05 PHP
Javascript 读书笔记索引贴
2010/01/11 Javascript
JS实现点击图片在当前页面放大并可关闭的漂亮效果
2013/10/18 Javascript
浅析webapp框架AngularUI的demo
2014/12/21 Javascript
纯JavaScript实现获取onclick、onchange等事件的值
2014/12/29 Javascript
解决ueditor jquery javascript 取值问题
2014/12/30 Javascript
IE浏览器下PNG相关功能
2015/07/05 Javascript
js右下角弹出提示框示例代码
2016/01/12 Javascript
用JS写的一个Ajax库(实例代码)
2016/08/06 Javascript
javascript数组去重方法分析
2016/12/15 Javascript
BootStrap+Mybatis框架下实现表单提交数据重复验证
2017/03/23 Javascript
AngularJS实现表单验证功能详解
2017/10/12 Javascript
使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例
2018/01/25 jQuery
redux-saga 初识和使用
2018/03/10 Javascript
vue使用v-if v-show页面闪烁,div闪现的解决方法
2018/10/12 Javascript
JS实现点击生成UUID的方法完整实例【基于jQuery】
2019/06/12 jQuery
JS Math对象与Math方法实例小结
2019/07/05 Javascript
layer扩展打开/关闭动画的方法
2019/09/23 Javascript
JavaScript console的使用方法实例分析
2020/04/28 Javascript
在antd Table中插入可编辑的单元格实例
2020/10/28 Javascript
vue 使用 sortable 实现 el-table 拖拽排序功能
2020/12/26 Vue.js
python获取豆瓣电影简介代码分享
2014/01/16 Python
python不换行之end=与逗号的意思及用途
2017/11/21 Python
Python编程把二叉树打印成多行代码
2018/01/04 Python
python正则中最短匹配实现代码
2018/01/16 Python
pandas数据筛选和csv操作的实现方法
2019/07/02 Python
澳大利亚网上玩具商店:Mr Toys Toyworld
2018/03/25 全球购物
施华洛世奇加拿大官网:SWAROVSKI加拿大
2018/06/03 全球购物
如何删除一个表里面的重复行
2013/07/13 面试题
优秀民警事迹材料
2014/01/29 职场文书
Python NumPy灰度图像的压缩原理讲解
2021/08/04 Python