CSS代码:
<script type="text/javascript">
function changeShow(){
var city= new Array;
city["河北省"]=["--请选择城市--","邯郸市","石家庄","秦皇岛","武安市","邢台市","廊坊市","沧州市","合肥市"];
city["hebei"]=["select","handan","shijiazhuang","qinhuangdao","wuan","xingtai","langfang","cangzhou","hefei"];
city["山东省"]=["--请选择城市--","不知道"];
city["shangdong"]=["select","buzhidao"];
city["北京市"]=["--请选择城市--","海淀区","宣武区","朝阳区","东城区"];
city["biejing"]=["select","haidian","xuanwu","chaoyang","dongcheng"];
var cityvalue= document.getElementById("sheng").value;
switch(cityvalue){
case "河北省":
document.getElementById("shi").options.length = 0;
for(var i=0;i<city["河北省"].length;i++){
document.getElementById("shi").options.add(new Option(city["河北省"][i], city["hebei"][i]));
}
break;
case "山东省":
document.getElementById("shi").options.length = 0;
for(var i=0;i<city["山东省"].length;i++){
document.getElementById("shi").options.add(new Option(city["山东省"][i], city["shangdong"][i]));
}
break;
case "北京市":
document.getElementById("shi").options.length = 0;
for(var i=0;i<city["北京市"].length;i++){
document.getElementById("shi").options.add(new Option(city["北京市"][i], city["biejing"][i]));
}
break;
}
}
</script>
HTML代码:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>省市级联</title>
</head>
<body>
<select id="sheng" onchange="changeShow()">
<option value="" selected="selected">--请选择省份--</option>
<option value="河北省">河北省</option>
<option value="山东省">山东省</option>
<option value="北京市">北京市</option>
</select>
<select id="shi" >
<option value="" selected="selected">--请选择市区--</option>
</select>
</body>
</html>