HTML+JS 省市二级联动

喜欢ヅ旅行 2022-12-15 09:01 283阅读 0赞

### 文章目录 ###

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

# 1. 按 #

1.  创建`二级联动.html`与`二级联动.js`，接着将本文的源码复制粘贴进去  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NPQ081Ng_size_16_color_FFFFFF_t_70_pic_center]
2.  最后打开`二级联动.html`即可看到如下效果：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NPQ081Ng_size_16_color_FFFFFF_t_70_pic_center 1]

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NPQ081Ng_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/9d2f3b1a7aaa460e8a4c1b95d3378cca.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0NPQ081Ng_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/95b93a984e8e4033836becb3f410295f.png