省市二级联动

最新推荐文章于 2022-12-04 20:38:52 发布

lx_1024

最新推荐文章于 2022-12-04 20:38:52 发布

阅读量482

点赞数

CC 4.0 BY-SA版权

分类专栏：插件文章标签：省市二级联动

本文链接：https://blog.youkuaiyun.com/lx_1024/article/details/74942411

插件专栏收录该内容

1 篇文章

订阅专栏

这篇博客主要记录了作者在工作中实现省市二级联动的过程，首次分享优快云上的经验。内容涉及如何处理省市数据和使用jQuery的相关问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这是我的第一篇优快云博客，这个省市二级联动是工作中用到，现在写出来记录一下，有写的不好的地方请指教。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<select name="province" id="province">
  <option>-请选择省份-</option>
</select>
<select name="city" id="city">
  <option>-请选择城市-</option>
</select>
<script src="jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="data.js"></script>
<script>
  $(function () {
//      获取省数据
      var provincedata=_areaselect_data["p"];
//      获取城市数据
      var citydata=_areaselect_data["c"];
//      点击第一个select框加载省列表
      $("#province").click(function () {
          if($(this).children().length==1){
              ProvincePanel();
          }

      });
//      改变省时加载市列表
      $("#province").change(function () {
          var a1=$("#city").children().length;
          for(var i=a1-1;i>0;i--){
              $("#city>option")[i].remove();
          }
          var province=$("#province").val();
          CityPanel(province);
      });
//      省列表
      function ProvincePanel() {
          var option="";
          for (var i=0;i<provincedata.length;i++){
              option+="<option>"+provincedata[i]+"</option>"
          }
          $("#province").append(option);
      }
//      市列表
      function CityPanel(province) {
          var option="";
          for(var i=0;i<citydata[province].length;i++){
              option+="<option>"+citydata[province][i]+"</option>"
          }
          $("#city").append(option);
      }
//      当市改变时获取当前的省市
      $("#city").change(function () {
          var a1=$("#province").val();
          var a2=$("#city").val();
          console.log(a1);
          console.log(a2);
      });
  })
</script>
</body>
</html>