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

镖师 · 发表于 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"
  },
  // 北京市的区县数据省略
]

©DZ插件网所发布的一切资源仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。
网站部分内容来源于网络，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容。如果您喜欢该程序，请支持正版软件，得到更好的正版服务。
您在本站任何的赞助购买、下载、查阅、回复等行为等均表示接受并同意签订《DZ插件网免责声明协议》。
如有侵权请邮件与我们联系处理: discuzaddons@vip.qq.com 并出示相关证明以便删除。敬请谅解！

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

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

相关帖子

回复

More猜你喜欢

关于我们

服务支持

discuzaddons@vip.qq.com