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

第一要可以监听到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联动 - CSDN博客的更多相关文章

  1. JAVA爬虫挖取CSDN博客文章

    开门见山,看看这个教程的主要任务,就去csdn博客,挖取技术文章,我以<第一行代码–安卓>的作者为例,将他在csdn发表的额博客信息都挖取出来.因为郭神是我在大学期间比较崇拜的对象之一.他 ...

  2. Python爬取CSDN博客文章

    0 url :http://blog.csdn.net/youyou1543724847/article/details/52818339Redis一点基础的东西目录 1.基础底层数据结构 2.win ...

  3. Android应用开发-小巫CSDN博客clientJsoup篇

    Android应用开发-小巫CSDN博客clientJsoup篇 距上一篇博客已经过去了两个星期,小巫也认为很抱歉,由于在忙着做另外一个项目,差点儿抽不出空来,这不小巫会把剩下的博文全部在国庆补上.本 ...

  4. 如何在CSDN博客自定义栏目中添加“给我写信”

    在"自定义栏目"中添加"连接"(将自己的微博,QQ空间和CSDN博客关联起来)很多人都做过.但是添加"给我写信"这个功能,用的好像不太多.此 ...

  5. 神一样的CSDN博客排名规则

    本文转载于:http://blog.csdn.net/littletigerat/article/details/17448521 神一样的CSDN博客排名规则 一.引言 年. 马年CSDN博客,毫无 ...

  6. 梦想还是要有的-纪念正式成为csdn博客专家暨年中总结

    csdn博客:http://blog.csdn.net/tuzongxun 我的csdn历程(坚持总会有收获):   一年零三个月之前,2015年3月3日,我在csdn写下第一篇技术博客,只是记录了一 ...

  7. 从csdn博客搬家过来,请多关照!

    之前一直在csdn博客,也写了不少关于java的文章,主要是学习java上的一些问题.想通过这种方式来加深对问题的认知,同时也可以帮助到志同道合的人,一起在编程的道路上共进,共勉.

  8. 原创内容搬家到csdn博客啦~

    以后原创的文章就发布在csdn博客啦: http://blog.csdn.net/aceyan0718 这里就用来当作一个网络笔记本吧,转载些优质的内容

  9. 【CSDN博客之星】2013年CSDN博客之星正在评选,希望大家支持,非常感谢!

    首先在此感谢 MoreWindows 秒杀多线程面试题系列让我成长和学习,同时也借鉴了很多优秀观点和示例! 请各位读者可以支持MoreWindows,让更优秀的文章陪伴我们! 各位读者好, 本人博客自 ...

随机推荐

  1. python configparser模块详解

    此模块提供了一个实现基本配置语言的类 首先来看一个非常基本的配置文件,如下所示格式: [DEFAULT] ServerAliveInterval = 45 Compression = yes Comp ...

  2. 分批次删除大表数据的shell脚本

    #!/bin/bash # 分别是主机名,端口,用户,密码,数据库,表名称,字段名称 readonly HOST="XXX" readonly PORT=" readon ...

  3. mapreduce.Job: Running job: job_1553100392548_0001

    这几天一直在尝试一个mapreduce的例子,但是一直都是卡在mapreduce.Job: Running job: job_1553100392548_0001,查看日志也不报错,查看每个配置文件没 ...

  4. 第六章 Odoo 12开发之模型 - 结构化应用数据

    在本系列文章第三篇Odoo 12 开发之创建第一个 Odoo 应用中,我们概览了创建 Odoo 应用所需的所有组件.本文及接下来的一篇我们将深入到组成应用的每一层:模型层.视图层和业务逻辑层. 本文中 ...

  5. mysql函数,语法

    转自:http://www.cnblogs.com/kissdodog/p/4168721.html MySQL数据库提供了很多函数包括: 数学函数: 字符串函数: 日期和时间函数: 条件判断函数: ...

  6. IDEA设置maven项目的默认配置

    IDEA设置maven项目的默认配置 问题描述 很多刚使用idea的人,用其创建maven工程时会遇到一个问题,明明给项目设置了新的maven配置(使用阿里镜像源或者自定义maven版本),但是重新打 ...

  7. 在 Angularjs 中$state.go 如何传递参数

    在目标页面规定接受的参数: .state('app.AttendanceEditFixed', { url: '/AttendanceEditFixed', params: {'id': null,' ...

  8. php缓存技术有哪些(总结)

    php缓存技术有哪些(总结) 一.总结 一句话总结: 静态页面:全页面静态化缓存,页面部分缓存(将页面中不常变动的部分进行静态化缓存), 数据缓存:比如我的每轮的题目数据,商店,寻宝数据等 数据库:查 ...

  9. PAT甲级——A1039 Course List for Student

    Zhejiang University has 40000 students and provides 2500 courses. Now given the student name lists o ...

  10. ElasticSearch基本操作(安装,索引的创建和删除,映射)

    ElasticSearch基于Lucene的搜索服务器,支持分布式,提供REST接口,可用于云计算,可以实现实时搜索,开源免费.这时很官方的一句话,在使用之前,我们简单的介绍一下安装过程.在官网下载之 ...