js特效—省市级联 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>js特效—省市级联</title>
<script>
//定义省级数组
var pArray=new Array("北京","上海","天津","山东");
//定义市级数组
var cArray=new Array();
cArray[0]=new Array("东城","西城","从文","宣武","朝阳","丰台");
cArray[1]=new Array("黄埔","鹿王","长宁","静安","普陀","虹口");
cArray[2]=new Array("北辰","南开","河西","河东","东丽","和平");
cArray[3]=new Array("济南","青岛","烟台","潍坊","济宁","泰安");
//初始化
function init(){
    var province=document.getElementById("province");
    for(var i=0;i<pArray.length;i++){
        var option=document.createElement("option");
        option.value=pArray[i];
        option.text=pArray[i];
        province.options.add(option);
    }
}
function show(){
    var province=document.getElementById("province");
    var city=document.getElementById("city");
    var pSelectedIndex=province.selectedIndex-1;
    var result=document.getElementById("result");
    if(pSelectedIndex<0){
        result.innerText="";
    }
    else{
        result.innerText=pArray[pSelectedIndex];
        var cSelectedIndex=city.selectedIndex-1;
        if(cSelectedIndex>=0){
            result.innerText+=","+cArray[pSelectedIndex][cSelectedIndex];
        }
    }
}
function selectProvince(){
    var province=document.getElementById("province");
    var city=document.getElementById("city");
    var pSelectedIndex=province.selectedIndex-1;
    for(var i=city.options.length-1;i>0;i--){
        city.options.remove(i);
    }
    if(pSelectedIndex>=0){
        for(var i=0;i<cArray[pSelectedIndex].length;i++){
            var option=document.createElement("option");
            option.value=cArray[pSelectedIndex][i];
            option.text=cArray[pSelectedIndex][i];
            city.options.add(option);
        }
    }
    show();
}

</script>
</head>

<body onLoad="init()" style="font-size:12px;"> 
<form>
省份：<select id="province" onChange="selectProvince()">
<option value="">请选择省份</option>
</select>
<br>
城市：<select id="city" onChange="show()">
<option value="">请选择城市</option>
</select>
<br><br>
你的选择结果是：<span id="result" style="color:red;"></span></form>
</body>
</html>

 

posted @ 2019-05-19 09:52  chuanzi  阅读(322)  评论(0)    收藏  举报