JavaScript省市区三级联动demo

不掉头发！

已于 2023-03-27 09:10:07 修改

阅读量80

点赞数

分类专栏： JavaScript 文章标签： html 前端 javascript Powered by 金山文档

于 2023-03-24 11:12:07 首次发布

本文链接：https://blog.csdn.net/qq_68862343/article/details/129746641

版权

JavaScript 专栏收录该内容

15 篇文章 1 订阅

订阅专栏

话不多说，直接上demo

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>三级联动</title>
    </head>
    <body>
        <center>
            <select id="sheng" style="width: 25%;">
                <option value="">-请选择省-</option>
            </select>
            &nbsp;&nbsp;&nbsp;
            <select id="shi" style="width: 25%;">
                <option value="">-请选择市-</option>
            </select>
            &nbsp;&nbsp;&nbsp;
            <select id="qu" style="width: 25%;">
                <option value="">-请选择区-</option>
            </select>
        </center>

        <script type="text/javascript">
            //数据，自己定义就好，需要注意的是数据格式
            let arr = [{
                id: 1,
                name: "河南",
                childer: [{
                    name: "郑州",
                    childer: [
                        "二期",
                        "金水区",
                        "惠济区"
                    ]
                }, {
                    name: "新乡",
                    childer: [
                        "红旗区",
                        "牧野区",
                        "经开区",
                        "辉县市",
                        "延津县",
                        "卫滨区",
                        "凤泉区",
                        "卫辉市",
                        "长恒市",
                        "新乡县",
                        "获嘉县",
                        "原阳县",
                        "封丘县"
                    ]
                }]
            }, {
                id: 2,
                name: "内蒙古",
                childer: [{
                    name: "呼和浩特",
                    childer: [
                        "新城区",
                        "赛罕区",
                        "玉泉区",
                        "回民区",
                        "托克托县",
                        "清水河县",
                        "武川县",
                        "和林格尔县",
                        "土默特左旗"
                    ]
                },
                {
                    name:"呼伦贝尔",
                    childer:[
                        "海拉尔区",
                        "扎赉诺尔区",
                        "满洲里市",
                        "扎兰屯市",
                        "牙克石市",
                        "根河市",
                        "额尔古纳市",
                        "阿荣旗",
                        "莫力达瓦达斡尔族自治旗",
                        "鄂伦春自治旗",
                        "鄂温克族自治旗",
                        '新巴尔虎左旗',
                        "新巴尔虎右旗",
                        "陈巴尔虎旗"
                    ]
                }]
            }];
            //获取到三个下拉框
            let sheng = document.getElementById("sheng");
            let shi = document.getElementById("shi");
            let qu = document.getElementById("qu");
            
            for (let i = 0; i < arr.length; i++) {
                sheng.innerHTML += '<option value="' + i + '">' + arr[i].name + '</option>';
            };
            //省级下拉框的状态触发事件
            sheng.onchange = function() {
                var val = this.value;//获取到当前下拉框的值
                if (val == '') {//如果当前值为空的话中止事件
                    return;
                }
                //当省级下拉框的值不为空时将市级下拉框的选项进行渲染
                //根据省级下拉框的值可以知道当前选中的省为哪一个，进行渲染对应的市级内容
                shi.innerHTML = '<option value="">-请选择市-</option>';
                for (let i = 0; i < arr[val].childer.length; i++) {
                    // let shiarr = arr[val].childer[i].name;
                    shi.innerHTML += '<option value="' + i + '">' + arr[val].childer[i].name + '</option>';
                }
                //优化更改省时出现的bug
                qu.innerHTML = '<option value="">-请选择区-</option>';
                //市级下拉框的状态触发事件
                shi.onchange = function() {
                    let vals = this.value;
                    if (vals == '') {
                        return;
                    }
                    qu.innerHTML = '<option value="">-请选择区-</option>';
                    for (let i = 0; i < arr[val].childer[vals].childer.length; i++) {
                        qu.innerHTML += '<option value="'+i+'">' + arr[val].childer[vals].childer[i] + '</option>';
                    }
                }
            }
        </script>
    </body>
</html>