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的闭包
Jan 17 Javascript
真正的JQuery.ajax传递中文参数的解决方法
May 28 Javascript
jquery 鼠标滑动显示详情应用示例
Jan 24 Javascript
利用js读取动态网站从服务器端返回的数据
Feb 10 Javascript
jQuery遍历Table应用示例
Apr 09 Javascript
iscroll碰到Select无法选择下拉刷新的解决办法
May 21 Javascript
JS事件添加和移出的兼容写法示例
Jun 20 Javascript
Angularjs中date过滤器失效的问题及解决方法
Jul 06 Javascript
2分钟实现一个Vue实时直播系统的示例代码
Jun 05 Javascript
Vue生命周期activated之返回上一页不重新请求数据操作
Jul 26 Javascript
vue组件中实现嵌套子组件案例
Aug 31 Javascript
vue中的计算属性和侦听属性
Nov 06 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命名空间和自动加载类
2016/04/03 PHP
php实现自定义中奖项数和概率的抽奖函数示例
2017/05/26 PHP
浅析PHP反序列化中过滤函数使用不当导致的对象注入问题
2020/02/15 PHP
为JavaScript添加重载函数的辅助方法
2010/07/04 Javascript
JQuery中html()方法使用不当带来的陷阱
2011/04/07 Javascript
js事件(Event)知识整理
2012/10/11 Javascript
javascript 动态修改css样式方法汇总(四种方法)
2015/08/27 Javascript
jQuery实现页面评论栏中访客信息自动填写功能的方法
2016/05/23 Javascript
js判断输入字符串是否为空、空格、null的方法总结
2016/06/14 Javascript
详解Javascript中的原型OOP
2016/10/12 Javascript
使用JS批量选中功能实现更改数据库中的status状态值(批量展示)
2016/11/22 Javascript
Vue.use源码分析
2017/04/22 Javascript
浅谈vuex之mutation和action的基本使用
2017/08/29 Javascript
解决vue中使用swiper插件问题及swiper在vue中的用法
2018/04/04 Javascript
深入理解Vue 组件之间传值
2018/08/16 Javascript
JavaScript Canvas实现验证码
2020/08/02 Javascript
微信小程序 确认框的实现(附代码)
2019/07/23 Javascript
在vue中动态修改css其中一个属性值操作
2020/12/07 Vue.js
js加减乘除精确运算方法实例代码
2021/01/17 Javascript
Python中unittest用法实例
2014/09/25 Python
Python下的subprocess模块的入门指引
2015/04/16 Python
Tensorflow 自带可视化Tensorboard使用方法(附项目代码)
2018/02/10 Python
python3 selenium自动化 frame表单嵌套的切换方法
2019/08/23 Python
Python命令行参数解析工具 docopt 安装和应用过程详解
2019/09/26 Python
Flask项目中实现短信验证码和邮箱验证码功能
2019/12/05 Python
python小程序基于Jupyter实现天气查询的方法
2020/03/27 Python
浅谈keras中的Merge层(实现层的相加、相减、相乘实例)
2020/05/23 Python
Python中的wordcloud库安装问题及解决方法
2020/05/27 Python
Python使用urlretrieve实现直接远程下载图片的示例代码
2020/08/17 Python
加拿大在线旅游公司:Flighthub
2019/03/11 全球购物
全球性的在线鞋类品牌:Public Desire
2019/04/03 全球购物
英国发展最快的在线超市之一:Click Marketplace
2021/02/15 全球购物
杭州-飞时达软件有限公司.net笔面试
2012/04/28 面试题
实习医生自我评价
2013/09/22 职场文书
党员一句话承诺大全
2014/03/28 职场文书
2019年农民幸福观调查的实践感悟
2019/12/19 职场文书