省市级联

WenwenFighting1314

于 2016-10-01 19:33:55 发布

阅读量423

点赞数

CC 4.0 BY-SA版权

文章标签：省市级联

本文链接：https://blog.youkuaiyun.com/WenwenFighting1314/article/details/52718353


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>

<body>
<form name="myform">
    <select name="pro" onChange="showCity()">
        <option value="">请选择省份</option>
    </select>
    <select name="city">
        <option value="">请选择城市</option>
    </select>
</form>
<script>
    var proArr=['湖南省','湖北省'];
    var pros=new Array();
    pros['湖南省']=['长沙市','衡阳市','常德市','株洲市','湘潭市'];
    pros['湖北省']=['武汉市','宜昌市','黄冈市','荆州市'];
    
    //添加到select
    console.info(document.myform.pro.options.length);//1
    document.myform.pro.options.length=0;//清楚下拉列表中原来的选项
    for(var i=0;i<proArr.length;i++){
        //创建option
        var op=new Option(proArr[i],proArr[i]);
        document.myform.pro.options.add(op);//将option对象添加到select中
    }
    
    function showCity(){
        var ops=document.myform.pro.options;//获取所有的省份信息
        for(var i=0;i<ops.length;i++){
            if(ops[i].selected==true){//选中 的省份
                add(ops[i].value);
            }
        }    
    }
    //添加城市信息
    function add(proName){
        document.myform.city.options.length=0;
        alert(pros[proName]);
        for(var i=0;i<pros[proName].length;i++){
            var op=new Option(pros[proName][i],pros[proName][i]);
            document.myform.city.options.add(op);
        }
    }
</script>
</body>
</html>