原生js实现联动菜单（收货地址的选择地址）_js 联动菜单到乡镇-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_44766633/article/details/107002702

本文介绍了一种使用HTML和JavaScript实现的级联下拉菜单，通过预定义的JSON数据结构，动态生成省、市、区三级联动选择框。代码中详细展示了如何根据上级选项的选择动态更新下级选项，实现了数据的嵌套关联。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先来看看效果图
在这里插入图片描述
下面是代码

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    省份：<select name="s" id="sf">
        <option value="0">选择省份</option>
    </select>
    市区：<select name="q" id="sq">
        <option value="0">选择市区</option>
    </select>
    乡镇：<select name="x" id="xz">
        <option value="0">选择乡镇</option>
    </select>
</body>

</html>
<script>
    var obj = [{
        sid: 1,
        name: '四川',
        child: [{
            sqid: 200,
            name: '成都',
            child1: [{
                xzid: 300,
                name: '崇州'
            }]
        }],
    },
    {
        sid: 2,
        name: '浙江',
        child: [{
            sqid: 400,
            name: '温州',
            child1: [{
                xzid: 300,
                name: '瑞安'
            }]
        }],
    }
    ];
    let sf = document.getElementById('sf');
    let sq = document.getElementById('sq');
    let xz = document.getElementById('xz');
    for (let i = 0; i < obj.length; i++) {
        let option = document.createElement('option');
        option.text = obj[i].name;
        option.value = obj[i].sid;
        sf.appendChild(option);
    }
    sf.onchange = function () {
        sq.innerHTML = "<option value='0'>选择市区</option>"
        let val = sf.value;
        console.log(val);
        for (let i = 0; i < obj.length; i++) {
            // let option = document.createElement('option');
            if (obj[i].sid == val) {
                for (let j = 0; j < obj[i].child.length; j++) {
                    let option = document.createElement('option');
                    option.text = obj[i].child[j].name;
                    option.value = obj[i].child[j].sqid;
                    sq.appendChild(option);
                }
            }
        }
    }
    sq.onchange = function () {
        xz.innerHTML = "<option value='0'>请选择乡镇</option>"
        let val = sq.value;
        for (let i = 0; i < obj.length; i++) {
            for (let j = 0; j < obj[i].child.length; j++) {
                if (val == obj[i].child[j].sqid) {
                    for (let h = 0; h < obj[i].child[j].child1.length; h++) {
                        let option = document.createElement('option');
                        option.text = obj[i].child[j].child1[h].name;
                        option.value = obj[i].child[j].child1[h].sqid;
                        xz.appendChild(option);
                    }
                }
            }
        }
    }
</script>