程序员社区

【DOM】下拉菜单选择城市与区示例

需求:选择一个城市后就可以选择对应的可供选择的区县

<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">

    </style>

    <script type="text/javascript">
        function selectCity() {
      		//二维数组
            var cities = [['选择城市'],
                          ['海淀区','朝阳区','东城区','西城区'],
                          ['鼓楼区','栖霞区','玄武区','秦淮区'],
                          ['杜集区','烈山区','相山区','濉溪县'],
                          ['瑶海区','蜀山区','庐阳区','包河区']]
            //获取两个下拉菜单对象
            var selectNode = document.getElementById("selectid");
            var subSelectNode = document.getElementById("subselectid");
            //获取选择的省的角标
            var index = selectNode.selectedIndex;
            //通过角标到容器中去获取对应的城市数组
            var arrCities = cities[index];

            //将子菜单中的内容清空
            for(var i=0;i<subSelectNode.options.length;i++){
                //通过父节点删除子节点
                subSelectNode.removeChild(subSelectNode.options[i]);
                i--;
            }

            //遍历城市数组,并将这个数组的元素对象封装成option对象,添加到子菜单中
            for(var i=0;i<arrCities.length;i++){
                var optionNode = document.createElement("option");
                optionNode.innerHTML=arrCities[i];
                subSelectNode.appendChild(optionNode);
            }
        }
    </script>
</head>
<body>
<select id="selectid" onchange="selectCity()">
    <option>选择省市</option>
    <option>北京</option>
    <option>南京</option>
    <option>淮北</option>
    <option>合肥</option>
</select>

<select id="subselectid">
    <option>选择城市</option>
</select>
</body>
</html>

在这里插入图片描述
在这里插入图片描述

赞(0) 打赏
未经允许不得转载:IDEA激活码 » 【DOM】下拉菜单选择城市与区示例

相关推荐

  • 暂无文章

一个分享Java & Python知识的社区