HTML JavaScript 通过单层for循环来完成＜select＞标签省市二级联动

最新推荐文章于 2023-03-30 11:27:05 发布

醉在音乐里

最新推荐文章于 2023-03-30 11:27:05 发布

阅读量654

点赞数

文章标签： js css html html5

本文链接：https://blog.csdn.net/ZZYYL_/article/details/107802972

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>地区选择</title>
</head>
<body>

<div align="center" >
    <table>
        <tr>
            <td >
                <select id="S1" onchange="Change()">
                    <option value="0">选择</option>
                    <option value="1">北京</option>
                    <option value="2">广东</option>
                    <option value="3">河南</option>
                </select>
            </td>
            <td >
                <select id="S2">
                    <option >选择</option>
                </select>
            </td>
        </tr>
    </table>
</div>

<script>
    function Change(){
        //第一种for循环
        let I = document.getElementById("S1");
        let W=[["东城区","西城区","朝阳区","丰台区","石景山区","海定区","房山区","通州区","大兴区"],
              ["广州","珠海","深圳","汕头","韶关","佛山","江门","湛江","茂名","惠州"],
              ["郑州","开封","洛阳","南阳","商丘","驻马店"]];
        let i=I.value;
        document.getElementById("S2").options.length=0;
        for(let x=0;x<W[i-1].length;x++) {
               document.getElementById("S2").options.add(new Option(W[i-1][x], W[i-1][x]));
        }
    }
</script>

</body>
</html>

后续添加数据只需要给二维数组W[ ][ ] 内添加数据即可

醉在音乐里

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML JavaScript 通过单层for循环来完成＜select＞标签省市二级联动

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>地区选择</title></head><body><div align="center" > <table> <tr> <td >
复制链接

扫一扫