<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<select id="countryid" οnchange="add1(this.value);">
<option value="0">--请选择--</option>
<option value="中国">中国</option>
<option value="美国">美国</option>
<option value="日本">日本</option>
</select>
<select id="cityid">
</select>
</body>
<script type="text/javascript">
<!--
//创建一个数组储存数据
//二维数组
var arr=new Array(3);
arr[0]=["中国","南京","广州"];
arr[1]=["日本","东京","北海道"];
arr[2]=["美国","纽约","华盛顿"];
function add1(val){
/*
1.遍历二维数组
2.得到也是一个数组（国家对应关系）
3.拿到数组中的第一个值和传递过来的值作比较
4.如果相同，获取到第一个值后面的元素。
5.得到city的select
6.添加过去（使用）appendChild方法
-创建option（三步）
*/
var city1=document.getElementById("cityid");
//得到city里面的option
var options1=city1.getElementsByTagName("option");
//遍历数组
for(var m=0;m<options1.length;m++){
//得到每一个option
var op=options1[m];
//删除这个option 通过父节点删除
city1.removeChild(op);
m--;
}
for(var i=0;i<arr.length;i++){
//得到二维数组里面的每一个值
var arr1=arr[i];
//得到遍历之后的数组的第一个值
var firstvalue=arr1[0];
//判断传递过来的值和第一个值是否相同
if(firstvalue==val){
//得到第一个值后面的元素
//遍历
for(var j=1;j<arr1.length;j++){
var value1=arr1[j];//得到城市的名称
//创建option
var option1=document.createElement("option");
//创建文本
var text1=document.createTextNode(value1);
//把文本添加到option1里面
option1.appendChild(text1);
//添加值到city1里面
city1.appendChild(option1);
}
}
}
}
//-->
</script>
</html>
