js----省市联动 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>省市联动</title>
        <script>
            var provinces=[
             ["深圳市","东菀市","惠州市","广州市"],
             ["长沙市","岳阳市","株洲市","湘潭市"],
             ["厦门市","福州市","漳州市","泉州市"]
            ];
            
            function selectProvince(){
                //获取选择的省级
                var province=document.getElementById("province");
                //获取选择的省级的值
                var value=province.value;
                
                //通过获取的值从全局数组值获取对应省级之下的市级
                var cities=provinces[value];
                
                //获得市级的对象
                var citySelect=document.getElementById("city");
                citySelect.options.length=0;//清空select中的options
                
                //遍历所有的市
                for(var i=0;i<cities.length;i++)
                {
                    var cityText = cities[i];
                    
                    //创建option节点
                    var option1=document.createElement("option");
                    //创建城市文本节点
                    var textNode=document.createTextNode(cityText);
                    
                    //将option节点和文本内容关联起来
                    option1.appendChild(textNode);
                    
                    //添加到城市select
                    citySelect.appendChild(option1);
                    
                }
            }
        </script>
    </head>
    <body>
        <!--选择省份-->
        <select onchange="selectProvince()" id="province">
            <option value="-1">--请选择--</option>
            <option value="0">广东省</option>
            <option value="1">湖南省</option>
            <option value="2">福建省</option>
        </select>
        <select id="city">
            
        </select>
    </body>
</html>

 

posted @ 2019-07-17 14:53  薄眠抛却陈年事。  阅读(399)  评论(0)  编辑  收藏  举报