省市县三级联动

最新推荐文章于 2023-05-05 15:50:06 发布

冰雪遇流年

最新推荐文章于 2023-05-05 15:50:06 发布

阅读量579

点赞数

分类专栏： ajax

本文链接：https://blog.csdn.net/dfjdks/article/details/52330922

版权

ajax 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

html部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery.min.js"></script>
</head>
<body>
    <select name="province" id="prov">
        <option>---请选择省</option>
    </select>
    <select name="cities" id="city">
        <option>---请选择市</option>
    </select>
    <select name="country" id="country">
        <option>---请选择县(区)</option>
    </select>
</body>
</html>

js部分

<script>
    $(function(){
        var info = "";
        $.ajax({
            url: "province.json",
            type: "get",
            success: function(data){
                info = data;
                change(data,"provName",$("#prov"));
            }
        });

        //给省份添加改变事件
        $("#prov").change(function(){
            //每次更改省，都重置市中的内容
            $("#city").html("<option>---请选择市</option>");
            var prov = $(this).val();  //获取选择的省
            for (var i = 0; i < info.length; i++) {
                if(info[i].provName==prov){
                   var list = info[i].city;
                    change(list,"cityName",$("#city"));
                }
            }

            //给城市添加改变事件
            $("#city").change(function(){
                $("#country").html("<option>---请选择县(区)</option>");
                var city = $(this).val();
                for (var k = 0; k < list.length; k++) {
                    if(city==list[k].cityName){
                        var coun = list[k].country;
                        change(coun,"countryName",$("#country"));
                    }
                }

            })
        });
    })




    //创建option标签函数
    function change(arr,attr,selector){
        for (var j = 0; j < arr.length; j++) {
            var option = document.createElement("option");
            option.innerHTML = arr[j][attr];
            selector.append(option);
        }
    }
</script>

对应的json文件

[
  {
    "provName": "辽宁省",
    "city": [
      {
        "cityName":"沈阳市",
        "country":[
          {"countryName":"法库县"},
          {"countryName":"辽中县"},
          {"countryName":"康平县"}
        ]
      },
      {
        "cityName":"大连市",
        "country":[
          {"countryName":"瓦房店市"},
          {"countryName":"金州市"},
          {"countryName":"庄河市"}
        ]
      }
    ]
  },
  {
    "provName": "黑龙江省",
    "city": [
      {
        "cityName":"哈尔滨市",
        "country":[
          {"countryName":"蜚克图镇"},
          {"countryName":"冷县"},
          {"countryName":"热县"}
        ]
      },
      {
        "cityName":"大庆市",
        "country":[
          {"countryName":"石油市"},
          {"countryName":"海市"},
          {"countryName":"陆地市"}
        ]
      }
    ]
  }
]

冰雪遇流年

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
省市县三级联动

html部分<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="../js/jquery.min.js"></script></head><body> <select name="province" id="prov">
复制链接

扫一扫