<!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>
