案例-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

相关阅读:
华为OD机试真题-补种未成活胡杨（Java/C++/Go/Python）
win10自动更新后vpn不能使用
java读取服务器数据包并下载至本地目录
【论文发表】2022 HIRE--首篇基于异构图神经网络的高阶关系知识蒸馏方法
Mysql使用中的性能优化——索引数对插入操作性能的影响
解决主机无法通过网络访问虚拟机的问题
MYSQL语言总结
javascript中Uint8/16/32Array 传入负数问题
深度学习之基于Pytorch的昆虫分类识别系统
CMake技术总结

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