js省市联动

最新推荐文章于 2024-07-19 15:34:53 发布

我是一只小猫咪aa

最新推荐文章于 2024-07-19 15:34:53 发布

阅读量242

点赞数 2

文章标签： ajax js 省市联动

本文链接：https://blog.csdn.net/weixin_44523717/article/details/97758889

版权

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <select name="" id="province">
        <option value="">请选择省份</option>
    </select>

    <select name="" id="city">
        <option value="">请选择市</option>
    </select>

    <select name="" id="area">
        <option value="">请选择区</option>
    </select>
</body>
<script>
    var province = document.querySelector("#province");
    var city = document.querySelector("#city");
    var area = document.querySelector("#area");

    var xhr = new XMLHttpRequest();
    xhr.open("get", "http://api.yytianqi.com/citylist/id/2", true);
    xhr.send();
    xhr.onreadystatechange = function () {
        if (this.readyState == 4 && this.status == 200) {
            var json = JSON.parse(this.responseText);
            var jsonList = json.list;
            var provinceHtml = "<option value=''>请选择省份</option>";


            jsonList.map(function (item) {
                var provinceId = item["city_id"];
                var provinceName = item["name"];
                provinceHtml += `<option value="${provinceId}">${provinceName}</option>`;
            });

            province.innerHTML = provinceHtml;

            // 当province的 select 里面value的值改变的时候
            var cityList = [];
            province.onchange = function () {
                var provinceId = this.value; // 省的id
                var province = jsonList.filter(function (item) {
                    return item["city_id"] == provinceId;
                })[0];
                cityList = province.list;

                var cityHtml = '<option value="">请选择市</option>';
                cityList.map(function (item) {
                    var cityId = item["city_id"];
                    var cityName = item["name"];
                    cityHtml += `<option value=${cityId}>${cityName}</option>`
                });
                city.innerHTML = cityHtml;
            };

            // 当city的select 里面value的值改变的时候
            city.onchange = function () {
                var cityId = this.value;

                var city = cityList.filter(function (item) {
                    return item["city_id"] == cityId;
                })[0];


                var areaList = city.list;
                // 判断是否为直辖市
                if (areaList) {
                    area.style.display = "inline-block";
                    var areaHtml = '<option value="">请选择区</option>';
                    areaList.map(function (item) {
                        var areaId = item["city_id"];
                        var areaName = item["name"];
                        areaHtml += `<option value="${areaId}">${areaName}</option>`;
                    });
                    area.innerHTML = areaHtml;
                } else {
                    area.style.display = "none";
                }
            };
        }
    };
</script>

</html>