2021-10-18 LayUI-实现省/市/区三级联动

最新推荐文章于 2024-05-15 18:15:18 发布

小呀小萝卜儿

最新推荐文章于 2024-05-15 18:15:18 发布

阅读量964

点赞数 3

分类专栏：工作-LayUI 文章标签： layui jquery ajax

本文链接：https://blog.csdn.net/weixin_48850734/article/details/120830673

版权

工作-LayUI 专栏收录该内容

47 篇文章 4 订阅

订阅专栏

结果：
在这里插入图片描述
代码(address_options.html)：

{include file="system@block/layui"/}
<link rel="stylesheet" href="__PUBLIC_JS__/layui/css/layui.css?v={:config('hisiphp.version')}">


<style>
  .layui-form-item {
    display: flex;
    justify-content: space-between;
  }
  .layui-form-select dl {
    max-height: 152px;
  }
  .layui-btn {
    padding: 0 36px;
    border-radius: 26px;
  }
</style>


<body>

<div>
  <form class="layui-form">
    <div class="layui-form-item">
      <div class="layui-input-inline" style="margin-left: 5px;width: 240px;margin-top: 15px;">
        <select id="province" lay-filter="province" lay-verify="required" lay-search="" name="province">
          <option value="">请选择省</option>
          {volist name="$data.province" id="v"}
          <option value="{$v.id}" {$data['info']['province'] == $v.id ? 'selected' :''}>{$v.area_name}</option>
          {/volist}
        </select>
      </div>
      <div class="layui-input-inline" style="margin-left: 5px;width: 240px;margin-top: 15px;">
        <select id="city" lay-filter="city" lay-verify="required" lay-search="" name="city">
          {if $data.city == []}
          <option value="">无</option>
          {else/}
          <option value="">请选择市</option>
          {volist name="$data.city" id="v"}
          <option value="{$v.id}" {$data['info']['city'] == $v.id ? 'selected' :''}>{$v.area_name}</option>
          {/volist}
          {/if}
        </select>
      </div>
      <div class="layui-input-inline" style="margin-left: 5px;width: 240px;margin-top: 15px;">
        <select id="area" lay-filter="area" lay-verify="required" lay-search="" name="area">
          {if $data.area == []}
          <option value="">无</option>
          {else/}
          <option value="">请选择县/区</option>
          {volist name="$data.area" id="v"}
          <option value="{$v.id}" {$data['info']['area'] == $v.id ? 'selected' :''}>{$v.area_name}</option>
          {/volist}
          {/if}
        </select>
      </div>
    </div>
    <!-- 传校区id -->
    <input type="hidden" name="id" value="{$data['info']['id']}">
    <div class="layui-form-item" style="margin-top: 110px;display: flex;align-items: center;justify-content: center;">
      <button class="layui-btn" lay-submit="" lay-filter="*">确定</button>
    </div>

  </form>
</div>

</body>


<script>
  layui.use(['form','layer','jquery'],function(){
    var form = layui.form,
        layer = parent.layer === undefined ? layui.layer : parent.layer,
        $ = layui.jquery;
    var provinceId = ""; // 省id
    var cityId     = ""; // 市id
    var areaId     = ""; // 县/区id

    //监听省下拉框
    form.on('select(province)', function(dataObj){
      //移除城市下拉框所有选项
      $("#city").empty();
      var cityHtml = '<option value="">请选择市</option>';
      $("#city").html(cityHtml);
      var areaHtml = '<option value="">请选择县/区</option>';
      $("#area").html(areaHtml);
      // 省id
      provinceId = $('select[name=province]').val();
      console.log(provinceId);
      //异步加载下拉框数据
      $.post("addressDetail",{"id":provinceId},function (res) {
        // var res = JSON.parse(res);
        console.log(res);
        if(res.sta == 2000){
          var $html = "";
          if(res.data != null) {
            $.each(res.data, function (index, item) {
              $html += "<option value='" + item.id + "'>" + item.area_name + "</option>";
            });
            $("#city").append($html);
            // append后必须从新渲染
            form.render('select');
          }
        }else{
          layer.msg(res.msg)
        }
      },'json');

    });

    // 监听市下拉框
    form.on('select(city)', function(dataObj){
      // 移除县区下拉框所有选项
      $("#area").empty();
      var html = '<option value="">请选择县/区</option>';
      $("#area").html(html);
      // 市id
      cityId = $('select[name=city]').val();
      console.log(cityId);
      // 异步加载下拉框数据
      $.post("addressDetail",{"id":cityId},function (res) {
        console.log(res);
        if(res.sta == 2000){
          var $html = "";
          if(res.data != null) {
            $.each(res.data, function (index, item) {
              $html += "<option value='" + item.id + "'>" + item.area_name + "</option>";
            });
            $("#area").append($html);
            //append后必须从新渲染
            form.render('select');
          }
        }else{
          layer.msg(res.msg)
        }
      },'json');

    });

    // 监听县区下拉框
    form.on('select(area)', function(dataObj){
      // 县/区id
      areaId = $('select[name=area]').val();
      console.log(areaId)
    });

    // 提交表单
    form.on('submit(*)', function(data){
      console.log(data);
        $.ajax({
          url: "{:url('addressData')}",
          type: 'post',
          data:data.field,
          success:function (res) {
            var res = JSON.parse(res);
            if(res.sta == 2000) {
              layer.msg(res.msg,{icon:1},function () {
                // 关闭layer弹窗
                var index1 = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                parent.layer.close(index1); //再执行关闭
              })
            } else {
              layer.msg(res.msg,{icon:2})
            }
          }
        })
      return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
    });

  });

</script>

其它页面(index.html)中点击编辑弹出layer，不过是跳转页面的弹窗
在这里插入图片描述

小呀小萝卜儿

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
2021-10-18 LayUI-实现省/市/区三级联动

结果：代码(address_options.html)：{include file="system@block/layui"/}<link rel="stylesheet" href="__PUBLIC_JS__/layui/css/layui.css?v={:config('hisiphp.version')}"><style> .layui-form-item { display: flex; justify-content: space-bet
复制链接

扫一扫