HTML+JS 省市二级联动

最新推荐文章于 2025-06-19 11:36:06 发布

原创最新推荐文章于 2025-06-19 11:36:06 发布 · 2.9k 阅读

10 ·

CC 4.0 BY-SA版权

本文为博主原创文章，未经博主允许不得转载。访问本人博客可以百度COCO56，获取更多资讯。有事儿请内信或者在文章下方评论

JS 同时被 2 个专栏收录

5 篇文章

订阅专栏

HTML

4 篇文章

订阅专栏

该博客展示了如何使用HTML和JavaScript创建二级联动下拉菜单。通过在HTML中定义两个选择框，一个用于省份，一个用于城市，并在JavaScript中设置二级联动逻辑，当选择省份时动态更新城市选项。示例包括广东和湖北两省的几个城市。

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

1. 按

创建二级联动.html与二级联动.js，接着将本文的源码复制粘贴进去
最后打开二级联动.html即可看到如下效果：

2. 源码

2.1. `二级联动.html`

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>二级联动</title>
    </head>

    <body>
        <script src="./二级联动.js"></script>
        <select id="province" onchange="choose(this.value)">
            <option value="0">--请选择省--</option>
            <option value="广东">广东</option>
            <option value="湖北">湖北</option>
        </select>
        <select id="city" disabled="disabled">
            <option value="0">--请选择市--</option>
        </select>
    </body>
</html>

2.2. `二级联动.js`

// 创建一个二维数组
var arr = new Array(2)
arr[0] = ["广东","广州","深圳","佛山"]
arr[1] = ["湖北","荆州","武汉","赤壁"]

function choose(val){
    // 获取city的select
    var city = document.getElementById("city")
    // 获取option
    var cityOp = city.getElementsByTagName("option")
    // 设置可操作
    city.disabled = false
    // 先删除，后添加
    while (cityOp.length > 0){
        // 删除第一个option
        city.removeChild(cityOp[0])
    }
    var isProvince = false
    // 遍历
    for (var i = 0; i < arr.length; i++) {
        //取一维数组
        var arr1 = arr[i]
        //取一维数组的第一个值
        var firstVal = arr1[0]
        //判断
        if (firstVal != val) continue
        isProvince = true
        //遍历
        for (var j = 1; j < arr1.length; j++) {
            // 获取城市名
            let value = arr1[j]
            // 创建option
            let option = document.createElement("option")
            // 创建文本
            let text = document.createTextNode(value)
            // 把文本添加到标签
            option.appendChild(text)
            //添加到city里面
            city.appendChild(option)
        }
    }
    if (!isProvince){
        city.disabled = true
        let option = document.createElement("option")
        let text = document.createTextNode("--请选择市--")
        option.appendChild(text)
        city.appendChild(option)
    }
}