<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>城市级联操作</title>
</head>
<body>
省份:
<select id="province" οnchange="cityCheck()">
<option>--请选择省份--</option>
</select>
城市:
<select id="city">
<option>--请选择城市--</option>
</select>
<script>
var cityList=new Array();
cityList['江苏省']=['南京市','南通市','无锡市'];
cityList['安微省']=['合肥市','芜湖市','马鞍山市'];
cityList['山东省']=['济南市','青岛市','烟台市'];
function provinceCheck(){
var province=document.getElementById('province');
// alert(province);
province.options.length=0;
for(var i in cityList){
province.add(new Option(i,i),null);
}
cityCheck();
}
window.οnlοad=provinceCheck();
function cityCheck(){
var province =document.getElementById('province');
var city = document.getElementById('city');
city.options.length=0;
for(var i in cityList){
if(i==province.value){
for(var j in cityList[i]){
city.add(new Option(cityList[i][j],cityList[i][j]),null);
}
}
}
}
</script>
</body>
</html>
运行结果:
注意点:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">顶部引入的dtd不可缺,否则运行失败