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 相关文章推荐
JavaScript高级程序设计
Dec 29 Javascript
EasyUi tabs的高度与宽度根据IE窗口的变化自适应代码
Oct 26 Javascript
40个有创意的jQuery图片、内容滑动及弹出插件收藏集之一
Dec 31 Javascript
javascript动态设置样式style实例分析
May 13 Javascript
超漂亮的jQuery图片轮播特效
Nov 24 Javascript
Angular学习笔记之angular的$filter服务浅析
Nov 12 Javascript
js实现移动端编辑添加地址【模仿京东】
Apr 28 Javascript
vue在使用ECharts时的异步更新和数据加载详解
Nov 22 Javascript
微信小程序-form表单提交代码实例
Apr 29 Javascript
vue给对象动态添加属性和值的实例
Sep 09 Javascript
vue实现移动端省市区选择
Sep 27 Javascript
Vue 中获取当前时间并实时刷新的实现代码
May 12 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
如何提高MYSQL数据库的查询统计速度 select 索引应用
2007/04/11 PHP
PHP 开发环境配置(Zend Server安装)
2010/04/28 PHP
一个严格的PHP Session会话超时时间设置方法
2014/06/10 PHP
php通过array_unshift函数添加多个变量到数组前端的方法
2015/03/18 PHP
PHP实现用户登录的案例代码
2018/05/10 PHP
特殊字符、常规符号及其代码对照表
2006/06/26 Javascript
国外的为初学者写的JavaScript教程
2008/06/09 Javascript
Javascript解决常见浏览器兼容问题的12种方法
2010/01/04 Javascript
jQuery UI 应用不同Theme的办法
2010/09/12 Javascript
JQuery+JS实现仿百度搜索结果中关键字变色效果
2011/08/02 Javascript
鼠标移到div,浮层显示明细,弹出层与div的上边距左边距重合(示例代码)
2013/12/14 Javascript
javascript制作的简单注册模块表单验证
2015/04/13 Javascript
用JavaScript实现对话框的教程
2015/06/04 Javascript
javascript封装 Cookie 应用接口
2015/08/07 Javascript
程序员必知35个jQuery 代码片段
2015/11/05 Javascript
Bootstrap布局组件教程之Bootstrap下拉菜单
2016/06/12 Javascript
Boostrap栅格系统与自己额外定义的媒体查询的冲突问题
2017/02/19 Javascript
vue如何引用其他组件(css和js)
2017/04/13 Javascript
浅谈Koa2框架利用CORS完成跨域ajax请求
2018/03/06 Javascript
原生JS实现轮播图效果
2018/10/12 Javascript
vue2.0中set添加属性后视图不能更新的解决办法
2019/02/22 Javascript
layui table 表格上添加日期控件的两种方法
2019/09/28 Javascript
Element Carousel 走马灯的具体实现
2020/07/26 Javascript
python 全局变量的import机制介绍
2017/09/07 Python
Django项目实战之用户头像上传与访问的示例
2018/04/21 Python
python学习之hook钩子的原理和使用
2018/10/25 Python
python 实现倒排索引的方法
2018/12/25 Python
使用CSS3制作一个简单的Chrome模拟器
2015/07/15 HTML / CSS
使用placeholder属性设置input文本框的提示信息
2020/02/19 HTML / CSS
几个常见的消息中间件(MOM)
2014/01/08 面试题
2014世界杯球队球队口号
2014/06/05 职场文书
禁毒宣传标语
2014/06/19 职场文书
岗位说明书标准范本
2014/07/30 职场文书
2014党员四风对照检查材料思想汇报
2014/09/17 职场文书
酒店客房服务员岗位职责
2015/04/09 职场文书
2019年新郎保证书3篇
2019/10/17 职场文书