·设为首页收藏本站📧邮箱修改🎁免费下载专区🔐设置/修改密码👽群雄群聊
返回列表 发布新帖

大佬可以帮忙看看这个是有什么问题吗

231 0
发表于 2023-3-20 12:42:01 | 显示全部楼层 阅读模式

马上注册,免费下载更多dz插件网资源。

您需要 登录 才可以下载或查看,没有账号?立即注册

×
html+js+ajax+json的六级联动

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>6级联动</title>
    <script src="jquery-3.6.0.min.js"></script>
    <script src="main.js"></script>
  </head>
  <body>
    <div>
      <select id="province">
        <option value="">请选择省份</option>
      </select>
      <select id="city">
        <option value="">请选择城市</option>
      </select>
      <select id="county">
        <option value="">请选择县区</option>
      </select>
      <select id="town">
        <option value="">请选择乡镇街道</option>
      </select>
      <select id="village">
        <option value="">请选择村社区</option>
      </select>
      <select id="group">
        <option value="">请选择组</option>
      </select>
    </div>
  </body>
</html>



----------------------------------------------------------------------
js文件
//
//
//
// 当网页加载完成时执行
$(document).ready(function() {
  // 加载省份数据
  $.ajax({
    type: "GET",
    url: "data/province.json",
    dataType: "json",
    success: function(data) {
      // 添加省份选项
      $.each(data, function(index, item) {
        $("#province").append("<option value='" + item.code + "'>" + item.name + "</option>");
      });
    }
  });

  // 当省份改变时执行
  $("#province").change(function() {
    // 清空城市、县区、乡镇街道、村社区和组的选项
    $("#city").empty();
    $("#county").empty();
    $("#town").empty();
    $("#village").empty();
    $("#group").empty();

    // 加载城市数据
    var code = $(this).val();
    if (code) {
      $.ajax({
        type: "GET",
        url: "data/city_" + code + ".json",
        dataType: "json",
        success: function(data) {
          // 添加城市选项
          $.each(data, function(index, item) {
            $("#city").append("<option value='" + item.code + "'>" + item.name + "</option>");
          });
        }
      });
    }
  });

  // 当城市改变时执行
  $("#city").change(function() {
    // 清空县区、乡镇街道、村社区和组的选项
    $("#county").empty();
    $("#town").empty();
    $("#village").empty();
    $("#group").empty();

    // 加载县区数据
    var code = $(this).val();
    if (code) {
      $.ajax({
        type: "GET",
        url: "data/county_" + code + ".json",
        dataType: "json",
        success: function(data) {
          // 添加县区选项
          $.each(data, function(index,item) {
$("#county").append("<option value='" + item.code + "'>" + item.name + "</option>");
});
}
});
}
});

// 当县区改变时执行
$("#county").change(function() {
// 清空乡镇街道、村社区和组的选项
$("#town").empty();
$("#village").empty();
$("#group").empty();

// 加载乡镇街道数据
var code = $(this).val();
if (code) {
  $.ajax({
    type: "GET",
    url: "data/town_" + code + ".json",
    dataType: "json",
    success: function(data) {
      // 添加乡镇街道选项
      $.each(data, function(index, item) {
        $("#town").append("<option value='" + item.code + "'>" + item.name + "</option>");
      });
    }
  });
}
});

// 当乡镇街道改变时执行
$("#town").change(function() {
// 清空村社区和组的选项
$("#village").empty();
$("#group").empty();
// 加载村社区数据
var code = $(this).val();
if (code) {
  $.ajax({
    type: "GET",
    url: "data/village_" + code + ".json",
    dataType: "json",
    success: function(data) {
      // 添加村社区选项
      $.each(data, function(index, item) {
        $("#village").append("<option value='" + item.code + "'>" + item.name + "</option>");
      });
    }
  });
}
});

// 当村社区改变时执行
$("#village").change(function() {
// 清空组的选项
$("#group").empty();
// 加载组数据
var code = $(this).val();
if (code) {
  $.ajax({
    type: "GET",
    url: "data/group_" + code + ".json",
    dataType: "json",
    success: function(data) {
      // 添加组选项
      $.each(data, function(index, item) {
        $("#group").append("<option value='" + item.code + "'>" + item.name + "</option>");
      });
    }
  });
}
});
});



-----------------------------------json文件

```json
[
  {
    "name": "北京市",
    "code": "110000"
  },
  {
    "name": "天津市",
    "code": "120000"
  },
  {
    "name": "河北省",
    "code": "130000"
  },
  // 省份数据省略
]


---------------------------

[
  {
    "name": "市辖区",
    "code": "110100"
  },
  {
    "name": "东城区",
    "code": "110101"
  },
  {
    "name": "西城区",
    "code": "110102"
  },
  // 北京市的区县数据省略
]
我要说一句 收起回复

回复

 懒得打字嘛,点击右侧快捷回复【查看最新发布】   【应用商城享更多资源】
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

投诉/建议联系

discuzaddons@vip.qq.com

未经授权禁止转载,复制和建立镜像,
如有违反,按照公告处理!!!
  • 联系QQ客服
  • 添加微信客服

联系DZ插件网微信客服|最近更新|Archiver|手机版|小黑屋|DZ插件网! ( 鄂ICP备20010621号-1 )|网站地图

您的IP:34.201.37.128,111.170.25.69,GMT+8, 2024-3-29 06:49 , Processed in 0.175918 second(s), 68 queries , Gzip On, Redis On.

Based on Discuz! W1.0 Licensed

© 2001-2024 Discuz! Team.

关灯 快速发帖
扫一扫添加微信客服
QQ客服返回顶部
快速回复 返回顶部 返回列表