JS 实现三级联动

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

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../routes/citys.js"></script>
</head>

<body>
    <select id="prov"></select>
    省
    <select id="city"></select>
    市
    <select id="dis"></select>
    区/县
</body>
<script>
    var oProv = document.getElementById("prov");
    var oCity = document.getElementById("city");
    var oDis = document.getElementById("dis");
    // console.log(citys);
    // console.log(citys.districts[0].districts);
    var provArr = citys.districts[0].districts; //数组  34个省份对象构成的数组
    //添加省份
    provArr.forEach(function (item) {
        //   console.log(item); //对象 遍历出的每个省份对象
        oProv.innerHTML += `<option value="${item.adcode}">${item.name}</option>`;
    });

    //添加省份对应的市
    oProv.onchange = function () {
        var val = this.value; //获取当前选择的省份的value
        for (var m = 0; m < provArr.length; m++) {
            var obj = provArr[m]; //对象 得到每个省份数据
            // console.log(obj);
            if (val === obj.adcode) {
                //如果选择的省份的value值与对象的adcode值一样
                var cityArr = obj.districts; //数组  获取当前省份里的districts属性值
                oCity.innerHTML = "";
                cityArr.forEach((item) => {
                    //遍历数组 省份对应的市渲染
                    oCity.innerHTML += `<option value="${item.adcode}">${item.name}</option>`;
                });
                break;
            }
        }
        addDis();
    };
    oProv.onchange();

    // 添加区/县
    oCity.onchange = addDis;
    function addDis() {
        var val = oCity.value; //市对应的value  6位数字 410987
        var two = val.substr(0, 2); //截取市的value前两位 "41"
        for (var k = 0; k < provArr.length; k++) {
            var obj = provArr[k]; //对象  遍历出来的每个省份
            // console.log(obj.adcode);//省份对应的编码
            if (obj.adcode.startsWith(two)) {
                //如果省份对应编码以截取的value前两位开头
                var c = obj.districts; //数组 得到当前市对应的省份里的所有市
                for (var m = 0; m < c.length; m++) {
                    var code = c[m].adcode; //得到每一个市对应的编码
                    if (val === code) {
                        var disArr = c[m].districts; //数组 区/县对应的数组
                        oDis.innerHTML = "";
                        disArr.forEach((item) => {
                            oDis.innerHTML += `<option value="${item.code}">${item.name}</option>`;
                        });
                        break;
                    }
                }
                break;
            }
        }
    }
    addDis();
</script>

</html>
<script src="../routes/citys.js"></script> 外链js代码省市区三级联动
猜你喜欢
