<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>级联</title>
</head>
<body onload="addpro()">
<div>
<table>
<tr>
<td>
<select id="pro" style="110px;" onchange="addcity()">
<option>=请选择省份=</option>
</select>
</td>
<td>
<select id="city" style="100px;">
<option>=请选择市=</option>
</select>
</td>
</tr>
</table>
</div>
<script type="text/javascript">
var pro = [{ value: '3', name: '江苏' }, { value: '4', name: '上海'}];
var city = [{ code: '3', name: '南京' }, { code: '3', name: '苏州' }, { code: '3', name: '常州' }, { code: '3', name: '无锡' }, { code: '3', name: '镇江' }, { code: '4', name: '徐汇区' }, { code: '4', name: '闵行区' }, { code: '4', name: '嘉定区'}];
function addpro() {
for (i = 0; i < pro.length; i++) {
document.getElementById("pro").add(new Option(pro[i]["name"], pro[i]["value"]));
}
}
function addcity() {
document.getElementById("city").length=1;
var objselect = document.getElementById("pro").options(document.getElementById("pro").selectedIndex);
for (i = 0; i < city.length; i++) {
if (city[i]["code"] == objselect.value) {
document.getElementById("city").add(new Option(city[i]["name"], city[i]["name"]));
}
}
}
</script>
</body>
</html>