学习记录342@JS练习之选择国家下拉列表，城市下拉列表添加对应的城市

最新推荐文章于 2022-09-29 11:49:44 发布

教练我想学编程

最新推荐文章于 2022-09-29 11:49:44 发布

阅读量534

点赞数

本文链接：https://blog.csdn.net/weixin_44663675/article/details/109530024

版权

需求：使用JS编程实现加载页面后自动添加国家下拉列表，选中某个国家时，城市下拉列表自动添加对应的城市

原界面

注意原始界面没有具体国家和具体城市
在这里插入图片描述

预期效果

在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册界面验证</title>
    <script type="text/javascript">
        //动态注册
        //window.onload保证文档加载完成
        window.onload=function () {
            // 加载后自动添加国家
            let country = document.getElementById("country");
            var arr_country = ["中国", "美国", "俄罗斯"];
            for (var i = 0; i < arr_country.length; i++) {
                let element = document.createElement("option");
                let text = document.createTextNode(arr_country[i]);
                element.appendChild(text);
                country.appendChild(element);
            }

            //创建城市map
            let map = new Map();
            map.set("中国",["成都", "北京", "上海"])
            map.set("美国",["华盛顿","洛杉矶","休斯顿"])
            map.set("俄罗斯",["莫斯科","圣彼得堡","新西伯利亚"])
            //获取国家数组
            let countrys = country.getElementsByTagName("option");
            //获取城市标签
            let city=document.getElementById("city");
            //国家标签改变时，选中哪一个国家，就在城市标签显示对应的城市
            country.onchange=function () {
                //先清空城市（处了"-城市-"外）
                // 这里一定要倒叙清空，因为删除一个城市对应的citys.length就会减一

                /*
                如果这样顺序删除就会出错，比如先删除索引为1的城市，然后i=2,
                但是此时后面的元素往前移动了，索引为1处还是有元素，但是无法删除，因为要删除索引为2的元素了
                这样删除元素就是不完整的，因此必须倒叙删除，从最后一个开始删除
                for (var i=1;i<citys.length;i++){
                    city.removeChild(citys[i]);
                }*/
                let citys = city.getElementsByTagName("option");
                for (var i=citys.length-1;i>0;i--){
                    city.removeChild(citys[i]);
                }
                //选中哪一个国家就对象添加城市
                for (var i=0;i<countrys.length;i++){
                    if (countrys[i].selected){
                        let arr_city = map.get(countrys[i].innerText);
                        for (var i=0;i<arr_city.length;i++){
                            let element = document.createElement("option");
                            let text = document.createTextNode(arr_city[i]);
                            element.appendChild(text);
                            city.appendChild(element);
                        }
                    }
                }
            }
        }
    </script>
</head>
<body>
    <select id="country">
        <option>-国家-</option>
    </select>

    <select id="city">
        <option>-城市-</option>
    </select>
</body>
</html>

教练我想学编程

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学习记录342@JS练习之选择国家下拉列表，城市下拉列表添加对应的城市

需求：使用JS编程实现加载页面后自动添加国家下拉列表，选中某个国家时，城市下拉列表自动添加对应的城市原界面注意原始界面没有具体国家和具体城市预期效果代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>注册界面验证</title> <script type="text/javascript"&g.
复制链接

扫一扫