省市区三级联动_省市区三级联动文件-CSDN博客

本文链接：https://blog.csdn.net/yanyuyanyan/article/details/112388619

省市区三级联动（包含案例代码，城市信息文件）

案例代码：数据文件博客中有可以直接下载

onchange事件：当值发生改变时触发事件。只属于文本框，密码框，文本域与下拉选择菜单。

selectedIndex属性：是select的node节点独有的属性，代表当前选择的选项相对于其他选项所处的下标，从0开始。

面向过程

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        div {
            width: 600px;
            height: 30px;
            border: 1px solid rgb(49, 128, 131);
            background-color: rgba(15, 132, 136, 0.6);
            margin: auto;
            margin-top: 50px;
            display: flex;
            justify-content: space-between;
        }
        
        select {
            font-size: 20px;
            height: 30px;
        }
    </style>
</head>

<body>
    <div>
        <select name="" id="provinces"></select>
        <select name="" id="city"></select>
        <select name="" id="district"></select>
    </div>

</body>

</html>
<script src="citys.js"></script>
<script>
    //获取省份或者直辖市
    let oProvinces = document.querySelector("#provinces");
    // 获取城市名称
    let oCity = document.querySelector("#city");
    //获取区
    let oDistrict = document.querySelector("#district");
    //遍历城市信息数据
    citys.forEach((item, index) => {
        let newOption = document.createElement("option");
        // console.log(item)
        newOption.innerHTML = item.provinceName;
        oProvinces.appendChild(newOption);

    })


    //定义函数获取城市信息
    function getCity(index) {
        oCity.innerHTML = ""
        citys[index].mallCityList.forEach((item, index) => {
            let newOption = document.createElement("option");
            newOption.innerHTML = item.cityName;
            oCity.appendChild(newOption);
        })
    }
    //定义函数获取区信息
    function getDistrict(index, Cindex) {
        oDistrict.innerHTML = ""
        citys[index].mallCityList[Cindex].mallAreaList.forEach((item) => {
            let newOption = document.createElement("option");
            newOption.innerHTML = item.areaName;
            oDistrict.appendChild(newOption);

        })
    }

    //页面刚进入时的默认值。
    getCity(0);
    getDistrict(0, 0);

    // 绑定省份框内容改变事件
    oProvinces.onchange = function() {
            getCity(this.selectedIndex);
            getDistrict(this.selectedIndex, oCity.selectedIndex);
        }
        // 绑定城市框内容改变事件
    oCity.onchange = function() {
        getDistrict(oProvinces.selectedIndex, this.selectedIndex);
    }
</script>

面向对象

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        div {
            width: 600px;
            height: 30px;
            border: 1px solid rgb(49, 128, 131);
            background-color: rgba(15, 132, 136, 0.6);
            margin: auto;
            margin-top: 50px;
            display: flex;
            justify-content: space-between;
        }
        
        select {
            font-size: 20px;
            height: 30px;
        }
    </style>
</head>

<body>
    <div>
        <select name="" id="provinces"></select>
        <select name="" id="city"></select>
        <select name="" id="district"></select>
    </div>

</body>

</html>
<script src="citys.js"></script>
<script>
    //面向对象
    let city = {
        oProvinces: document.querySelector("#provinces"),
        oCity: document.querySelector("#city"),
        oDistrict: document.querySelector("#district"),
        init() {
            citys.forEach((item, index) => {
                    let newOption = document.createElement("option");
                    // console.log(item)
                    newOption.innerHTML = item.provinceName;
                    this.oProvinces.appendChild(newOption);
                })
                // //页面刚进入时的默认值。
            this.getCity(0);
            this.getDistrict(0, 0);
            // 绑定省份框内容改变事件
            this.oProvinces.onchange = () => {
                    this.getCity(this.oProvinces.selectedIndex);

                    this.getDistrict(this.oProvinces.selectedIndex, this.oCity.selectedIndex);
                }
                // 绑定城市框内容改变事件
            this.oCity.onchange = () => {
                this.getDistrict(this.oProvinces.selectedIndex, this.oCity.selectedIndex);
            }
        },
        getCity(index) {
            this.oCity.innerHTML = ""
            citys[index].mallCityList.forEach((item, index) => {
                let newOption = document.createElement("option");
                newOption.innerHTML = item.cityName;
                this.oCity.appendChild(newOption);
            })

        },
        getDistrict(index, Cindex) {
            this.oDistrict.innerHTML = ""
            citys[index].mallCityList[Cindex].mallAreaList.forEach((item) => {
                let newOption = document.createElement("option");
                newOption.innerHTML = item.areaName;
                this.oDistrict.appendChild(newOption);

            })
        },


    }
    city.init()

</script>