js下拉列表级联案例

最新推荐文章于 2024-01-25 15:17:49 发布

金玉良缘2017

最新推荐文章于 2024-01-25 15:17:49 发布

阅读量1.2k

点赞数

分类专栏： jsp javascript 文章标签： javascript 级联分类器列表下拉框 js

本文链接：https://blog.csdn.net/qq_24708791/article/details/77893709

版权

jsp 同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

javascript

1 篇文章 0 订阅

订阅专栏

js下拉列表级联案例

下面是省市级联菜单的Demo

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            window.onload = function() {
                //1.准备市区数据
                var arr = new Array(2);
                arr[0] = ["漯河", "郑州", "洛阳", "三门峡", "灵宝", "登封"];
                arr[1] = ["保定", "石家庄", "邢台", "邯郸", "承德", "秦皇岛"];
                arr[2] = ["济南", "青岛", "菏泽", "济宁", "潍坊", "烟台", "德州"];
                arr[3] = ["朝阳区", "海淀区", "昌平区"];
                //2.点击省份,触发事件
                document.getElementById("province").onchange = function() {
                    //3.获取当前点击对象value属性的值,作用 作为城市数组的下标
                    var index = this.value;
                    //4.根据下标选择对应的城市
                    var cityArr = arr[index];
                    //5.遍历city数组,动态添加到市区下拉选择框
                    //bug:动态添加城市前,先把之前的城市清空
                    document.getElementById("city").innerHTML = " <option >--请-选-择-市--</option> ";
                    for(var i = 0; i < cityArr.length; i++) {
                        var cityName = cityArr[i];
                        //6.创建option节点
                        var option = document.createElement("option");
                        //7.创建文本节点
                        var text = document.createTextNode(cityName);
                        //8 把文本添加到option里面
                        option.appendChild(text);
                        //9.把option动态的添加到select
                        var select = document.getElementById("city");
                        select.appendChild(option);
                    }
                }
            }
        </script>
    </head>
    <body>

        省份：
        <select  id="province">
            <option value="">----请-选-择-省----</option>
            <option value="0">河南省</option>
            <option value="1">河北省</option>
            <option value="2">山东省</option>
            <option value="3">北京市</option>
            <option value="4">浙江省</option>
            <option value="5">上海市</option>
        </select>

        市区：
        <select id="city">
            <option value="">----请-选-择-市----</option>
        </select>
    </body>

金玉良缘2017

关注

0
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
js下拉列表级联案例

js下拉列表级联案例下面是省市级联菜单的Demo <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> window.onload = function() { //1.准备市区数据
复制链接

扫一扫