js三级联动案例(省份,城市,县区,街道)

最新推荐文章于 2022-06-23 09:01:40 发布

Dust_SongYunfei

最新推荐文章于 2022-06-23 09:01:40 发布

阅读量1.8k

点赞数 1

分类专栏： # Javascript基础

本文链接：https://blog.csdn.net/dust__/article/details/98106725

版权

Javascript基础专栏收录该内容

32 篇文章 6 订阅

订阅专栏

	<script type="text/javascript">
			/*分析:
			 * 1.创建页面元素(下拉列表框 select)
			 * 2.创建二维数组存储数据(地区)
			 * 3.获取页面元素(下拉框 省份,城市,区县)
			 * 4.将所有的省份添加在省份的下拉框(for循环遍历数组,if判断索引为2,的值值是否为0,累计添加省份名,)
			 * 5.给省份添加内容改变时触发事件(onchange)
			 * 根据选择的省份获取(遍历)对应的城市(添加pero.value 也可添加索引值Pero.selectIndx=1(代码不灵活))
			 * 6.给城市.区县用省份同样方法获取当内容改变触发事件时遍历数据
			 * 7.在点击其他省份时清空区县和街道数据
			 */
			//2
			var arr=[
					[1,'陕西省',0],
					[2,'甘肃省',0],
					[3,'山西省',0],
					
					[4,'西安市',1],
					[5,'宝鸡市',1],
					[6,'咸阳市',1],
					
					[7,'雁塔区',4],
					[8,'高新区',4],
					[9,'长安区',4],
					
					[10,'鱼化寨街道',7],
					[11,'大雁塔街道',7],
					[12,'小寨路街道',7]
					]
			
			window.onload=function(){
				//3
				var prove=document.getElementById('prove');
				var city=document.getElementById('city');
				var  count=document.getElementById('county');
				var jiedao=document.getElementById('jiedao');
				//console.log(prove+';'+city+';'+count+';'+jiedao);
				//4
				var str='<option>--请选择省份--</option>';
					//遍历数组,存储省份的下拉框数据
					for (var i=0;i<arr.length;i++){
						if (arr[i][2]==0) { //数组中索引为2的值为0,则为省份
							//累计添加省份名,并给value值为数组为的数
							str+='<option value="'+arr[i][0]+'">'+arr[i][1]+'</option>';
						}
					}
				//添加到prove的下拉框中	
				prove.innerHTML=str;
				
				//当prove下拉框数据内容改变时触发事件
				prove.onchange=function(){
					
					str='<option>--请选择城市--</option>';
					//在点击其他省份时给区县和街道添加标签
					count.innerHTML='<option>--请选择区县--</option>';
					jiedao.innerHTML='<option>--请选择街道--</option>';
					//循环遍历数组中的值
					for (var i=0;i<arr.length;i++) {
						//如果省份的value值等于数组中最后一个索引的值
						if (prove.value==arr[i][2]){
							//累计在添加城市名
							str+='<option value="'+arr[i][0]+'">'+arr[i][1]+'</option>';
						}
					}
					//将数据添加到城市的下拉框中
					city.innerHTML=str;
				}
				
				//当city下拉框数据内容改变时触发事件
				city.onchange=function(){
					str='<option>--请选择区县--</option>'
					for (var i=0;i<arr.length;i++) {
						//若城市的value值等于数组最后一个索引的值
						if (city.value==arr[i][2]) {
							//累计添加区县名
							str+='<option value="'+arr[i][0]+'">'+arr[i][1]+'</option>';
						}
					}
					//将数据添加到区县的下拉框中
					count.innerHTML=str;
				}
				
				//当count下拉框
				count.onchange=function(){
					str='<option>--请选择街道--</option>';
					for (var i=0; i<arr.length;i++){
						//若区县的value值等于数组最后一个索引的值
						if (count.value==arr[i][2]){
							//累计添加街道名
							str+='<option>'+arr[i][1]+'</option>';
						}
					}
					//将数据添加到街道的下拉框中
					jiedao.innerHTML=str;
				}
			}
		</script>
	</head>
	<body>
		省份:<select id="prove">
			<option value="">--请选择省份--</option>
		</select>
		城市:<select id="city">
			<option value="">--请选择城市--</option>
		</select>
		区县:<select id="county">
			<option value="">--请选择区县--</option>
		</select>
		街道:<select name="" id="jiedao">
			<option value="">--请选择街道--</option>
		</select>
	</body>

Dust_SongYunfei

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
js三级联动案例(省份,城市,县区,街道)

<script type="text/javascript"> /*分析: * 1.创建页面元素(下拉列表框 select) * 2.创建二维数组存储数据(地区) * 3.获取页面元素(下拉框省份,城市,区县) * 4.将所有的省份添加在省份的下拉框(for循环遍历数组,if判断索引为2,的值值是否为0,累计添加省份名,) * 5.给省...
复制链接

扫一扫