zoukankan      html  css  js  c++  java
  • layui的select联动

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

    第一要可以监听到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');重新渲染一次,就可以正常使用。

  • 相关阅读:
    linux权限补充:rwt rwT rws rwS 特殊权限
    关于Linux操作系统下文件特殊权限的解释
    Java学习笔记——Java程序运行超时后退出或进行其他操作的实现
    Java实现 蓝桥杯 算法提高 判断名次
    Java实现 蓝桥杯 算法提高 判断名次
    Java实现 蓝桥杯 算法提高 日期计算
    Java实现 蓝桥杯 算法提高 日期计算
    Java实现 蓝桥杯 算法提高 概率计算
    Java实现 蓝桥杯 算法提高 概率计算
    Java实现 蓝桥杯 算法提高 复数四则运算
  • 原文地址:https://www.cnblogs.com/wzjwffg/p/9882858.html
Copyright © 2011-2022 走看看