页面组成:两个下拉框
function add1(val)
1.遍历二维数组
2.得到也是一个数组
3.拿到数组中的一个值和传递过来的值做比较
4.如果相同,获取得到第一个值后面的元素
5.得到city的select
6.添加appendChild方法
创建option
由于每次都想要city里面的option
第二次添加,追加。每次添加添加之前判断一下city里面是否有option,如果有则删除
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<select id="countryid" onchange="add1(this.value);">
<option value="中国">中国</option>
<option value="美国">美国</option>
<option value="德国">德国</option>
<option value="日本">日本</option>
</select>
<select id="cityid">
</select>
</body>
<script type="text/javascript">
var arr = new Array(4);
arr[0] = ["中国", "西安", "福州", "哈密", "成都"];
arr[1] = ["美国", "华盛顿", "休斯顿", "纽约", "底特律"];
arr[2] = ["德国", "慕尼黑", "柏林", "法兰克福", "狼堡"];
arr[3] = ["日本", "东京", "北海道", "广岛", "长崎"]
function add1(val) {
var city1 = document.getElementById("cityid");
var options1 = city1.getElementsByTagName("option");
for(var m =0;m<options1.length;m++){
var op = options1[m]
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];
var option1 = document.createElement("option");
var text1 = document.createTextNode(value1);
option1.appendChild(text1);
city1.appendChild(option1);
}
}
}
}
</script>
</html>