HTML+JS 省市二级联动

COCO56 2020-10-15 21:18:03

358

分类专栏： JS HTML

最后发布:2020-10-15 21:18:03首次发布:2020-10-15 21:18:03

本文链接：https://blog.csdn.net/COCO56/article/details/109105674

版权

文章目录

1. 按
2. 源码
- 2.1. `二级联动.html`
- 2.2. `二级联动.js`

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)
    }
}