框中无内容,代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>省市联动</title>
</head>
<script type="text/javascript">
var arr = ["中国","美国","日本"] ;
arr["中国"] = ["北京","上海","钓鱼岛"] ; //不能再加var,否则不是二维数组了
arr["美国"] = ["纽约","华盛顿","旧金山"] ;
arr["日本"] = ["东京","大阪","神户"] ;
arr["北京"] = ["海淀","朝阳","昌平","丰台"] ;
arr["上海"] = ["浦东","金山","崇明","浦西"] ;
arr["钓鱼岛"] = ["钓鱼岛东","钓鱼岛南","钓鱼岛西","钓鱼岛北"] ;
arr["纽约"] = ["纽约1","纽约2","纽约3","纽约4"] ;
arr["华盛顿"] = ["华盛顿1","华盛顿2","华盛顿3","华盛顿4"] ;
arr["旧金山"] = ["旧金山1","旧金山2","旧金山3","旧金山4"] ;
arr["东京"] = ["东京1","东京2","东京3","东京4"] ;
arr["大阪"] = ["大阪1","大阪2","大阪3","大阪4"] ;
arr["神户"] = ["神户1","神户2","神户3","神户4"] ;
function init(){
//填充国家
fillData(arr,"country");
//添加省市
fillData(arr[arr[0]],"province");
//添加地区
fillData(arr[arr[0][0]],"country");
}
function fillData(arr,id)
//清空select选项
document.getElementById(id).options.length=0;
//添加选项
for(var i=0;i<arr.length;i++){
//创建option对象
var option=new option();
option.text=arr[i];
option.value=arr[i];
document.getElementById("id").options.add(option);
}
function changepro(coun){
//清空省市选项
document.getElementById("province").options.length=0;
//添加省市
fillData(arr[coun],"province");
//添加地区
fillData(arr[arr[coun][0]],"area");
}
function changearea(pro){
fillData(arr[pro],"area");
}
}
</script>
<body onload="init()">
国家:<select id="country" onchange="changepro(this.value)"></select>
省市:<select id="province" onchange="changearea(this.value)"></select>
地区:<select id="area"></select>
</body>
</html>