js中的三级联动

最新推荐文章于 2023-09-23 13:15:52 发布

搁°浅

最新推荐文章于 2023-09-23 13:15:52 发布

阅读量685

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/JGD313/article/details/98323622

版权

JavaScript 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

          <!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
		    /*分析：
		     * 1创建html检点
		     * 2利用for循环便利出每一个数组
		     * （1）if判断所有的省市(省市是用arr[i][2]
		     * 	表示的是索引为2等于等于0的数全部便利出来)，
		     *  把省市判断出来后
		     *  (2)用一个变量把省市中的省全部显示出来
		     * （变量要是全局变量不然访问不到）
		     * （3）并赋给省市的下拉框
		     * 3(1)给省市添加一个onchange改变时内容触发
		     *  (2)便利出所有数组
		     *  （3）在数组中判断省市的value值是否等于等于
		     *    它对应的arr[i][2]的值
		     *  注：要提前在上一个城市里获取value
		     *   （4）再在里面用一个变量接收option标签
		     *    （5） 在外面用城市的innerhtml写入标签内
		     *    （6）方便进入下拉框
		     * 4获取城市的onchange内容改变时触发事件
		     * 同上
		     * 
		     * */
			window.onload=function(){
				var arr=[
				
				     [1,'陕西省',0],
				     [2,'山西省',0],
				     [3,'山东省',0],
				     [4,'四川省',0],
				     
				     [5,'陕西市1',1],
				     [6,'陕西市2',1],
				     [7,'陕西市3',1],
				     [8,'陕西市4',1],
				     
				     [9,'山西市1',2],
				     [10,'山西市2',2],
				     [11,'山西市3',2],
				     
				     [12,'山东市1',3],
				     [13,'山东市2',3],
				     
				     [14,'陕西县1',5],
				     [15,'陕西县2',5],
				     [16,'陕西县3',5],
				     [17,'陕西县4',5]
			    ]	
			var shengfen=document.getElementById('shengfen'); 
			var chengshi=document.getElementById('chengshi');
			var quxian=document.getElementById('quxian')
//			var str='';
		var str='<option>--请选择省份--</option>'//加了不影响撒的是多了一行
		for (var i=0;i<arr.length;i++) {
			if (arr[i][2]==0) {
				//获取option中的文字显示在下拉框中，但前提是要用城市下拉框接收
				str+='<option value="'+arr[i][0]+'">'+arr[i][1]+'</option>'
			}
		}
		shengfen.innerHTML=str;
		
		shengfen.onchange=function(){
			quxian.innerHTML='<option>--请选择曲线--</option>'//区分一下
			//表示把上一个清空了，代码是从上往下执行会把上面原有的覆盖掉
			str='<option>--请选择城市--</option>'
			for (var i=0;i<arr.length;i++) {
				if (shengfen.value==arr[i][2]) {
					str+='<option value="'+arr[i][0]+'">'+arr[i][1]+'</option>'
				}
			}
			//给城市添加内容城市
			chengshi.innerHTML=str;
		}
		chengshi.onchange=function(){
			str='<option>--请选择区县--</option>'
			for (var i=0;i<arr.length;i++) {
				if (chengshi.value==arr[i][2]) {//判断之前先给chengshi添加value值使value==后面子代的值
					str+='<option>'+arr[i][1]+'</option>'
				}
			}
			quxian.innerHTML=str;
		}
		
   }
	</script>
</head>
<body>
	      省份：
		   <select name="" id="shengfen">
		   	<option value="">--请选择省份--</option>
		   </select>
		城市：
		   <select name="" id="chengshi">
		   	<option value="">--请选择城市--</option>
		   </select>
		区县：
			<select name="" id="quxian">
				<option value="">--请选择区县--</option>
			</select>
</body>