省市二级联动 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <select id="province">
        <option>请选择</option>
    </select>
    <select id="city">
        <option>请选择</option>
    </select>

    <script>
        const aProvince = [["重庆", "大足区", "潼南区"], ["上海", "黄浦区", "徐汇区"], ["北京", "东城区", "西城区"]];
        let eProvince=document.getElementById("province");

        for (let i = 0; i < aProvince.length; i++){
            eProvince.options.add(new Option(aProvince[i][0], i));
        }


        eProvince.onchange = function () {
            let ecity=document.getElementById("city")
            ecity.options.length = 1
            let index = eProvince.selectedIndex;
                for (let i = 0; i < aProvince.length; i++){
                    if(aProvince[i][0] === eProvince.options[index].text)
                    {
                        for (let n = 1; n < aProvince[i].length; n++){
                            ecity.options.add(new Option(aProvince[i][n], n - 1));
                        }
                    }
                }


        }
    </script>
</body>
</html>

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <select id="province" onchange="change(this)">
        <option>请选择</option>
    </select>
    <select id="city">
        <option>请选择</option>
    </select>

    <script>
        const aProvince = {"重庆市": ["大足区", "潼南区"], "上海市": ["黄浦区", "徐汇区"], "北京市": ["东城区", "西城区"]};
        let eleProvince = document.getElementById("province");
        for (let i in aProvince){
            let option = document.createElement("option");
            option.innerHTML= i;
            eleProvince.appendChild(option);
        }

        function change(par) {
            let eleCity = document.getElementById("city");
            eleCity.options.length=1;

            let choice = par.options[par.selectedIndex].innerHTML

            for (let i in aProvince[choice]){
                let option = document.createElement("option");
                option.innerHTML= aProvince[choice][i];
                eleCity.appendChild(option);
            }

        }


    </script>
</body>
</html>

 

posted @ 2021-04-27 22:21  Shuranima  阅读(41)  评论(0)    收藏  举报