<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body onload="init()">
<script>
var arr = ["中国","美国","日本"] ;
arr["中国"] = ["北京","上海","钓鱼岛"] ;
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(){//默认是第一个国家第一个省市第一个地区
for(var i=0; i<arr.length;i++){//为国家的select填充数据
var option = new Option();//为select创建option并对它进行初始化
option.text=arr[i];
option.value=arr[i];
//把option添加到select中去,注意options是默认的装option的数组,此处只能用add(),不能用push()
document.getElementById("country").options.add(option);
}
for(var i=0; i<arr[arr[0]].length;i++){//arr["中国"].length,"中国"在arr数组中的第0个元素
var option = new Option();//为select创建option并对它进行初始化
option.text=arr[arr[0]][i];
option.value=arr[arr[0]][i];
//把option添加到select中去,注意options是默认的装option的数组,此处只能用add(),不能用push()
document.getElementById("province").options.add(option);
}
for(var i=0; i<arr[arr[arr[0]][0]].length;i++){//arr["北京"].length==arr[arr["中国"][0]]==arr[arr[arr[0][0]]
var option = new Option();//为select创建option并对它进行初始化
option.text=arr[arr[arr[0]][0]][i];
option.value=arr[arr[arr[0]][0]][i];
//把option添加到select中去,注意options是默认的装option的数组,此处只能用add(),不能用push()
document.getElementById("area").options.add(option);
}
}*/
//通过观察发现每个for循环只有arr 和id不同,所以我们可以抽取一个方法,那么就会少写很多代码
function fillData(arr,id){
document.getElementById(id).options.length=0;//清空数组
for(var i=0; i<arr.length;i++){
var option = new Option();//var option = new Option(arr[i],arr[i]);
option.text=arr[i];
option.value=arr[i];
document.getElementById(id).options.add(option);
}
}
function init(){
fillData(arr,"country");//把arr数组中的数据填充到id为country的selec中
fillData(arr[arr[0]],"province");//arr["中国"]里的数据--->省市栏
fillData(arr[arr[arr[0]][0]],"area");//arr["北京"]里的数据填充到地区栏
}
function changePro(countryValue){//传递国家的value
fillData(arr[countryValue],"province");//把国家数组中数据填充到省市中
fillData(arr[arr[countryValue][0]],"area");// 省市数据填充到区域,arr[countryValue][0],0表示显示每个国家的对应的省市里面的第一个省市
}
function changeArea(provinceValue){//把省市数组中的数据填充到区域中
fillData(arr[provinceValue],"area");
}
</script>
国家:<select id="country" onchange="changePro(this.value)"></select>
省市:<select id="province" onchange="changeArea(this.value)"></select>
地区:<select id="area" ></select>
</body>
</html>