案例-JS控制二级联动

案例-JS控制二级联动

1.需求分析

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7YYSDU2d-1663548210762)(img/tu_22.png)]

在注册页面添加籍贯,左边是省份的下拉列表,右边是城市的下拉列表.右边的select根据左边的改变而更新数据

2.思路分析

创建这个页面 (两个select)
给省份的select设置onchange事件
当省份改变的时候

//1.获得省份的value
//2.根据省份的数据 获得当前省份的城市数据  eg: ["深圳", "广州", "东莞", "惠州"]
//3.清除城市下拉框中的城市
//4.遍历出每一个城市
//5.把每一个城市创建成option节点  eg: 
//6.把option节点添加到右边的城市的select里面
1
2
3
4
5
6

3.代码实现

<body>
    <select id="provinceSelect">
        <option value="0">请选择省份option>
        <option value="1">广东省option>
        <option value="2">湖南省option>
        <option value="3">湖北省option>
    select>
    <select id="citySelect">
        <option>请选择城市option>
    select>

    <script>
        //准备数据
        var cities = [
            [],
            ["广州","深圳","惠州","东莞"],
            ["长沙","岳阳","常德","衡阳"],
            ["武汉","黄冈","宜昌","荆州"]
        ]

        //2. 给省份的下拉框绑定onchange事件
        var provinceSelect = document.getElementById("provinceSelect");

        provinceSelect.onchange = function () {
            //2.1 获取当前选择的省份的所有城市
            var value = provinceSelect.value;
            //当前省份的城市数组
            var items = cities[value];

            //2.2 遍历出每一个城市
            //遍历添加之前，先清除城市下拉框中的所有option
            document.getElementById("citySelect").innerHTML = ""
            for (var i = 0; i < items.length; i++) {
                //每一个城市
                var cityName = items[i];
                //创建option
                var optionElement = document.createElement("option");
                //将城市名设置到option标签体中
                optionElement.innerHTML = cityName
                //将option标签添加到城市下拉框中
                document.getElementById("citySelect").appendChild(optionElement)
            }
        }
    script>
body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

相关阅读:
SpringBoot 学习（八）异步任务，邮件发送和定时执行
U盘重装系统，踩了很多坑后的总结
对话以太坊Vitalik及其父，至暗时刻为什么加密比金钱更重要？
关注用户信息卡片
机械原理-试题及答案
精准用户画像！商城用户分群2.0！⛵
GO语言-包的使用
Web3还没实现，Web5乍然惊现！
【C++】类和对象（四）“这三种”成员变量只能放在初始化列表中初始化，你都知道吗？
vue怎么跳转页面？

原文地址：https://blog.csdn.net/weixin_48351326/article/details/126926522