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分页脚本
May 21 Javascript
JavaScript中关于indexOf的使用方法与问题小结
Aug 05 Javascript
初窥JQuery(一)jquery选择符 必备知识点
Nov 25 Javascript
ASP.NET jQuery 实例6 (实现CheckBoxList成员全选或全取消)
Jan 13 Javascript
两种方法解决javascript url post 特殊字符转义 + &amp; #
Apr 13 Javascript
AngularJS路由Ui-router模块用法示例
May 29 Javascript
微信小程序实现animation动画
Jan 26 Javascript
详解vue-router 命名路由和命名视图
Jun 01 Javascript
js实现随机数小游戏
Jun 28 Javascript
javaScript实现一个队列的方法
Jul 14 Javascript
vue 在单页面应用里使用二级套嵌路由
Dec 19 Vue.js
简单聊聊Vue中的计算属性和属性侦听
Oct 05 Vue.js
关于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 GD 图像处理组件的常用函数总结
2010/04/28 PHP
php实现获取文章内容第一张图片的方法
2014/11/04 PHP
php实现求相对时间函数
2015/06/15 PHP
PHP加密解密实例分析
2015/12/25 PHP
SharePoint 客户端对象模型 (一) ECMA Script
2011/05/22 Javascript
Javascript保存网页为图片借助于html2canvas库实现
2014/09/05 Javascript
JavaScript下的时间格式处理函数Date.prototype.format
2016/01/27 Javascript
javascript css红色经典选项卡效果实现代码
2016/05/17 Javascript
js捕捉键盘事件和按键键值的方法
2016/10/10 Javascript
使用vue实现点击按钮滑出面板的实现代码
2017/01/10 Javascript
javascript 面向对象function详解及实例代码
2017/02/28 Javascript
整理关于Bootstrap列表组的慕课笔记
2017/03/29 Javascript
webpack搭建vue 项目的步骤
2017/12/27 Javascript
详解基于webpack&amp;gettext的前端多语言方案
2019/01/29 Javascript
javascript+css实现进度条效果
2020/03/25 Javascript
通过实例解析js可枚举属性与不可枚举属性
2020/12/02 Javascript
python中的多线程实例教程
2014/08/27 Python
Python中内置数据类型list,tuple,dict,set的区别和用法
2015/12/14 Python
一个基于flask的web应用诞生 用户注册功能开发(5)
2017/04/11 Python
python简单贪吃蛇开发
2019/01/28 Python
python开发实例之python使用Websocket库开发简单聊天工具实例详解(python+Websocket+JS)
2020/03/18 Python
python爬虫实现POST request payload形式的请求
2020/04/30 Python
python如何使用代码运行助手
2020/07/03 Python
如何从csv文件构建Tensorflow的数据集
2020/09/21 Python
Python实现简单的2048小游戏
2021/03/01 Python
加大码胸罩、内裤和服装:Just My Size
2019/03/21 全球购物
小型女装店的创业计划书
2014/01/09 职场文书
蓝颜请假条
2014/04/11 职场文书
学校节能宣传周活动总结
2014/07/09 职场文书
党的群众路线教育实践活动整改落实情况报告
2014/10/28 职场文书
2015年安全生产责任书
2015/01/30 职场文书
九华山导游词
2015/02/03 职场文书
结婚典礼致辞
2015/07/28 职场文书
家长必看:义务教育,不得以面试 评测等名义选拔学生
2019/07/09 职场文书
用Python将GIF动图分解成多张静态图片
2021/06/11 Python
JS封装cavans多种滤镜组件
2022/02/15 Javascript