JavaScript基础——省市联动

最新推荐文章于 2022-09-28 19:29:07 发布

我不抽烟zzm

最新推荐文章于 2022-09-28 19:29:07 发布

阅读量162

点赞数 1

本文链接：https://blog.csdn.net/qq_35052286/article/details/72904473

版权

<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>

我不抽烟zzm

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript基础——省市联动

Document --请选择-- 中国美国日本 <!-- //创建一个数组储存数据 //二维数组 var arr=new Array(3); arr[0]=["中国","南京","广州"]; arr[1]=["日本","东京","北海道"]; arr[2]=["美国","纽约","华盛顿"]; function add1(v
复制链接

扫一扫