省市联动
省市联动
* 创建一个页面，有两个下拉选择框
* 在第一个下拉框里面有一个事件 ：改变事件 onchange事件
- 方法add1(this.value);表示当前改变的option里面的value值
* 创建一个二维数组，存储数据
* 每个数组中第一个元素是国家名称，后面的元素是国家里面的城市
注意：
1、遍历二维数组
2、得到也是一个数组（国家对应关系）
3、拿到数组中的第一个值和传递过来的值做比较
4、如果相同，获取到第一个值后面的元素
5、得到city的select
6、添加过去（使用）appendChild方法
创建option（三步）
由于每次都要向city里面添加option
第二次添加，会追加。
每次添加之前，判断一下city里面是否有option，如果有，删除
<body>
<select id="country" onchange="add1(this.value)">
<!-- this.value 表示当前选择的value的值-->
<option value="0">--请选择--</option>
<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){
//alert(val);
/*1.遍历2维数组
2.得到也是一个数组（国家对于关系）
3.拿到数组中的第一个值和传递过来的值进行比较
4.如果相同，获取到第一值后面的元素
5.得到city的select
6.添加过去appendChild方法
*/
/*
由于每次都要想city里面添加option
第二次添加，追加
* 每次添加之前，判断一下city里面是否有option，如果有，删除
*/
//获取city的select
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) { //相同
//得到第一个值后面的元素
//遍历arr1
for(var j=1;j<arr1.length;j++) {
var value1 = arr1[j]; //得到城市的名称
//alert(value1);
//创建option
var option1 = document.createElement("option");
//创建文本
var text1 = document.createTextNode(value1);
//把文本添加到option1里面
option1.appendChild(text1);
//添加值到city1里面
city1.appendChild(option1);
}
}
}
}
</script>
浙公网安备 33010602011771号