js select_select2 联动列表.html

最新推荐文章于 2023-03-15 11:42:35 发布

学无止境慢慢来

最新推荐文章于 2023-03-15 11:42:35 发布

阅读量251

点赞数

分类专栏： js

原文链接：https://www.w3school.com.cn/tags/tag_select.asp

版权

js 专栏收录该内容

132 篇文章 0 订阅

订阅专栏

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js select_select2</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            font: 20px/1.2 楷体;
        }
    </style>
</head>
<body>
<label for="a1">省：</label><select id="a1" οnchange="addOption()"></select>
<label for="a2">市：</label><select id="a2"></select>
<script>
    /*参考：https://www.w3school.com.cn/tags/tag_select.asp*/
    let provinces_cities = {};
    provinces_cities['江苏'] = ['南京', '连云港', '苏州', '镇江'];
    provinces_cities['山东'] = ['青岛', '烟台', '济南'];

    function initSel_sel() {
        let provinceSel = document.getElementById("a1");
        for (let i in provinces_cities) {
            // new Option(i, i), 两个 i,分别是 text，value。
            provinceSel.add(new Option(i, i), null);
        }
        addOption(); // 初始化选项
    }

    function addOption() {
        let citySel = document.getElementById("a2");
        let province = document.getElementById("a1").value;
        citySel.length = 0; // 每次都先清空一下市级菜单。
        for (let city of provinces_cities[province]) {
            citySel.add(new Option(city, city), null);
        }
    }

    window.onload = initSel_sel();
</script>
</body>
</html>

学无止境慢慢来

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js select_select2 联动列表.html

<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>js select_select2</title> <style> * { margin: 0; padding: 0; font: 20px/1.2 楷体; .
复制链接

扫一扫