2021-06-25 layui下拉框三级联动

参考文章

实现省市地区的级联

1.html中和 lay-filter=""（绑定select） 和 from.on() 实现下拉点击事件

    <div class="layui-form-item">
      <label class="layui-form-label">地址</label>
      <div class="layui-input-inline">
       <select id="province" lay-filter="province" lay-verify="required" lay-search="">
         <option value="">请选择或搜索省</option>
       </select>
      </div>
      <div class="layui-input-inline">
       <select id="city" lay-filter="city" lay-verify="required" lay-search="">
         <option value="">请选择或搜索市</option>
       </select>
      </div>
      <div class="layui-input-inline">
       <select id="area" lay-filter="area" lay-verify="required" lay-search="">
         <option value="">请选择或搜索县/区</option>
       </select>
      </div>
     
      <div class="layui-input-inline" style="width: 45%;">
       <input class="layui-input" id="" lay-verify="required" placeholder="请输入详细地址：城镇＋乡村＋街道＋门牌号码"></input>
      </div>
    </div>

2.js代码

    layui.use(['form','layer','jquery'],function(){
      var form = layui.form,
       layer = parent.layer === undefined ? layui.layer : parent.layer,
       $ = layui.jquery;
     
      var provinceText = "";
      var cityText = "";
      var areaText = "";
      //异步加载下拉框数据
      $.post(WEB_ROOT+"dtArea/queryByParentId",{"id":0},function (data) {
        if(!data.success){
          layer.msg(data.msg)
        }else{
          var $html = "";
          if(data.data != null) {
            $.each(data.data, function (index, item) {
              $html += "<option value='" + item.id + "'>" + item.areaName + "</option>";
            });
            $("#province").append($html);
            //append后必须从新渲染
            form.render('select');
          }
        }
     
      });
     
      //监听省下拉框
      form.on('select(province)', function(dataObj){
        //移除城市下拉框所有选项
        $("#city").empty();
        var cityHtml = '<option value="">请选择或搜索市</option>';
        $("#city").html(cityHtml);
        var areaHtml = '<option value="">请选择或搜索县/区</option>';
        $("#area").html(areaHtml);
        provinceText = $("#province").find("option:selected").text();
        var value = $("#province").val();
        //异步加载下拉框数据
        $.post(WEB_ROOT+"dtArea/queryByParentId",{"id":value},function (data) {
          if(!data.success){
            layer.msg(data.msg)
          }else{
            var $html = "";
            if(data.data != null) {
              $.each(data.data, function (index, item) {
                $html += "<option value='" + item.id + "'>" + item.areaName + "</option>";
              });
              $("#city").append($html);
              //append后必须从新渲染
              form.render('select');
            }
          }
     
        });
     
      });
     
      //监听市下拉框
      form.on('select(city)', function(dataObj){
        //移除县区下拉框所有选项
        $("#area").empty();
        var html = '<option value="">请选择或搜索县/区</option>';
        $("#area").html(html);
     
        cityText = $("#city").find("option:selected").text();
        var value = $("#city").val();
        //异步加载下拉框数据
        $.post(WEB_ROOT+"dtArea/queryByParentId",{"id":value},function (data) {
          if(!data.success){
            layer.msg(data.msg)
          }else{
            var $html = "";
            if(data.data != null) {
              $.each(data.data, function (index, item) {
                $html += "<option value='" + item.id + "'>" + item.areaName + "</option>";
              });
              $("#area").append($html);
              //append后必须从新渲染
              form.render('select');
            }
          }
     
        });
     
      });
     
      //监听县区下拉框
      form.on('select(area)', function(dataObj){
        areaText = $("#area").find("option:selected").text();
      });
    });

注意：在选择父级下拉同时要清除下级下拉内容

实现大项、分项、小项的级联：

1.div标签中的 layui-form lay-filter="xxx"  绑定xxx后，  form.render('select','xxx'); 才能刷新xxx

<div class="layui-inline layui-col-md3">
                                            <label class="layui-form-label">运动大项<span style="color: red;">*</span></label>
                                            <div class="layui-input-block">
                                                <select id="sportsTypeParent" name="sportsTypeParent" lay-filter="sportsTypeParent" lay-verify="required" >
                                                    <option value="">请选择</option>
                                                    @for(perEvent in dictSportsTypeParent){
                                                    <option value="${perEvent.eventId}">${perEvent.eventName}</option>
                                                    @}
                                                </select>
                                            </div>
                                        </div>
                                        <div class="layui-inline layui-col-md3">
                                            <label class="layui-form-label">运动分项<span style="color: red;">*</span></label>
                                            <div class="layui-input-block layui-form" lay-filter="sportsTypeBranch">
                                                <select id="sportsTypeBranch" name="sportsTypeBranch" lay-filter="sportsTypeBranch" lay-verify="required">
                                                    <option value="">请选择</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="layui-inline layui-col-md3">
                                            <label class="layui-form-label">运动小项<span style="color: red;">*</span></label>
                                            <div class="layui-input-block layui-form" lay-filter="sportsTypeSon">
                                                <select id="sportsTypeSon" name="sportsTypeSon" lay-verify="required">
                                                    <option value="">请选择</option>
                                                </select>
                                            </div>
                                        </div>

//禁选分项和小项
    $("#sportsTypeBranch").attr("disabled","disabled");
    $("#sportsTypeSon").attr("disabled","disabled");
    form.render('select');

    //点击大项的响应事件：分项取消禁选，并根据大项id查询分项内容
    form.on('select(sportsTypeParent)', function(data){
        $("#sportsTypeBranch").removeAttr("disabled");
        form.render('select','sportsTypeBranch');//刷新下拉

        //移除分项、小项下拉框所有选项
        $("#sportsTypeBranch").empty();//清空内容
        // $("#sportsTypeSon").empty();
        var areaHtml = '<option value="">请先选择分项</option>';
        $("#sportsTypeSon").html(areaHtml);
        form.render('select');

        var eventType = 2; //分项等级
        var parentId = data.value; //得到被选中的值

        var ajax = new $ax(Feng.ctxPath + "selectEvent?eventType=" + eventType + '&parentId=' + parentId, function (data) {
            $("#sportsTypeBranch").empty();
            if(data != ''){
                $.each(data, function(key, val) {
                    $("#sportsTypeBranch").append('<option value='+val.eventId+'>'+val.eventName+'</option>');
                });
            }
            form.render('select','sportsTypeBranch');//刷新下拉
        });
        ajax.start();
    });

    //点击分项的响应事件：根据分项id查询分项内容
    form.on('select(sportsTypeBranch)', function(data){
        $("#sportsTypeSon").removeAttr("disabled");
        form.render('select','sportsTypeSon');//刷新下拉

        var eventType = 3; //分项等级
        var parentId = data.value; //得到被选中的值

        //小项下拉框所有选项
        $("#sportsTypeSon").empty();
        form.render('select','sportsTypeSon');

        $.ajax({
            type: "POST",
            url: '/perInfo/selectEvent?eventType=' + eventType + '&parentId=' + parentId,
            success:function(data){
                //每次请求完将上一次的请求结果清空，否则结果会一直叠加
                $("#sportsTypeSon").empty();
                if(data != ''){
                    $.each(data, function(key, val) {
                        $("#sportsTypeSon").append('<option value='+val.eventId+'>'+val.eventName+'</option>');
                    });
                }
                form.render('select','sportsTypeSon');//刷新下拉
            }
        });
    });