三级联动

最新推荐文章于 2024-10-04 22:03:04 发布

nh^O^

最新推荐文章于 2024-10-04 22:03:04 发布

阅读量70

点赞数

文章标签： css javascript

本文链接：https://blog.csdn.net/NIHAOHAOHOA/article/details/115893959

版权

<!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>
    <style>
        #box1 {
            display: none;
        }
        
        #box2 {
            display: none;
        }
    </style>
</head>

<body>
    <form>
        省:<select name="" id="box"></select>
        <select name="" id="box1">
             <option value="">请选择</option>
         </select>
        <select name="" id="box2">
            <option value="">请选择</option>
        </select>
    </form>
    <script>
        var box = document.getElementById("box")
        var box1 = document.getElementById("box1")
        var box2 = document.getElementById("box2")
            // 设置包含全国所有省市的所有位置
        var locations = {
            '0': {
                1: '北京',
                2: '河北',
                3: '河南',
                4: '山东'
            },
            '1': {
                5: '北京市'
            },
            '5': {
                6: '昌平区',
                7: '通州区',
                8: '延庆'
            },
            '2': {
                9: '石家庄',
                10: '保定',
                11: '唐山'
            },
            '9': {
                12: '藁城',
                13: '正定',
                14: '赵县'
            },
            '10': {
                15: '满城',
                16: '定州',
                17: '涿州'
            },
            '11': {
                18: '玉田',
                19: '迁安',
                20: '黟县'
            },
            '3': {
                21: '郑州',
                22: '洛阳'
            },
            '21': {
                23: '金水区',
                24: '木水区',
                25: '深水区'
            },
            '22': {
                26: '牡丹区',
                27: '随便'
            },
        }
        console.log(locations[0])
            // 设置省份
        var ss = "<option value=''>请选择</option>"
            // 将所有的省份追加到str里面
        for (var i in locations[0]) {
            ss += "<option value='" + i + "'>" + locations[0][i]
            "</option>"
        }
        box.innerHTML = ss
        box.onchange = function() {
            // 获取省份下的所有的市区
            var ss1 = '<option value="">请选择</option>'
                // 遍历所有市
            for (var i in locations[this.value]) {
                ss1 += "<option value='" + i + "'>" + locations[this.value][i] + "</option>"
            }
            box1.style.display = "inline-block"
            box1.innerHTML = ss1;
        }
        box1.onclick = function() {
            var ss2 = "<option value=''>请选择</option>"
            for (var i in locations[this.value]) {
                ss2 += "<option value='" + i + "'>" + locations[this.value][i] + "</option>"
            }
            box2.style.display = "inline-block"
            box2.innerHTML = ss2;
        }
    </script>
</body>

</html>在这里插入代码片