省市级联合浮动

By admin in 4858美高梅 on 2019年4月8日
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>省市级联动</title>
        <script>
            //1.定义一个二维数组存储省市信息
            var city = new Array(3);
            city[0] = new Array("长沙市","株洲市","湘潭市","衡阳市","岳阳市","常德市","张家界市","郴州市","永州市","邵阳市","娄底市","怀化市","益阳市","湘西土家图苗族自治州");
            city[1] = new Array("武汉市","黄石市","十堰市","宜昌市","襄樊市","鄂州市","荆门市","孝感市","荆州市","黄冈市","天门市");
            city[2] = new Array("黄浦区","卢湾区","徐汇区","长宁区","金山区","虹口区");
            city[3] = new Array("广东市","深圳市","珠海市","清远市");
            //2.将所选的省和数组中的省进行匹配
            function changeCity(val) {
                //6.获取下一个select节点
                var selectNode = document.getElementById("cities");
                //  alert("111");
                //8.在每次重新选择后,将第二个下拉框中的数据清除。
                selectNode.length = 0;
                for(var i = 0;i<city.length;i++) {
                    if(val == i) {
                        for(var j =0;j<city[i].length;j++){
                            //3.创建option节点
                            var opNode = document.createElement("option");
                            //4.创建文本节点
                            var cityNode = document.createTextNode(city[i][j]);
                            //5.将文本节点加入option节点中
                            opNode.appendChild(cityNode);
                            //alert(opNode.value);
                            //7.将option节点加入select节点中
                            selectNode.appendChild(opNode);
                        }


                    }
                }
            }
        </script>
    </head>
    <body>
        籍贯
        <select onchange = "changeCity(this.value)">
            <option >--请选择--</option>
            <option value="0">湖南</option>
            <option value="1">湖北</option>
            <option value="2">上海</option>
            <option value="3">广东</option>
        </select>
        <select id="cities">

        </select>
    </body>
</html>

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有