案例-JS控制二级联动

最新推荐文章于 2023-05-08 14:18:33 发布

可口口可

最新推荐文章于 2023-05-08 14:18:33 发布

阅读量232

点赞数 1

分类专栏： JavaScript 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_48351326/article/details/126926522

版权

JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

案例-JS控制二级联动

1.需求分析

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

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

2.思路分析

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

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

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 = "<option>请选择城市</option>"
            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>