Js 三级联动(省,市,县)

最新推荐文章于 2024-04-26 20:21:12 发布

bqy0108

最新推荐文章于 2024-04-26 20:21:12 发布

阅读量88

点赞数

本文链接：https://blog.csdn.net/bqy0108/article/details/119514101

版权

需求:创建一个简单的三级联动,并且进入页面后显示省的下拉框

首先我们先在body标签内创建3个下拉选项(select),并在script中创建数组

然后定义id ,通过id获取到当前元素的.然后进入定义好的方法

获取到省的信息

获取市的信息

获取县的信息

因为是老师讲完之后自己理解然后加以注释如有错误还望大家及时指导

感谢~~`

<!DOCTYPE html>
<html>
<head>
	<title>js简单三级联动</title>
</head>
<body onload="run()" >
省<select id="id1" onchange="run1(this.value)">
	

</select>

市<select id="id2" onchange="run2(this.value)">
	
	
</select>
县/区<select  id="id3">
	
	
</select>

</body>
</html>
<script type="text/javascript">
	var arr=[

//  id 名字 pid
	[1,"江苏",0],
	[2,"山东",0],  //创建省
	[3,"徐州",1],	//创建市
	[4,"扬州",1],
	[5,"济南",2],
	[6,"青岛",2],
	[7,"鼓楼区",3], //创建县/区
	[8,"贾汪区",3],
	[9,"邗江区",4],
	[10,"广陵区",4],
	[11,"市中区",5],
	[12,"天桥区",5],
	[13,"市北区",6],
	[14,"崂山区",6],
	];
	//省
function run(){
 	var shengelement=document.getElementById("id1");	//通过id获取元素位置
 	var content="<option>请输入</option>";//定义一个空的内容
 	for(var i=0;i<arr.length;i++){//进入遍历
 		if(arr[i][2]==0){ //判断 如果下标==0的时候证明获取的就是省的信息

 		//把需要写入的信息加入到content中 arr[i][0]是获取到id 值,  arr[i][1]获取省的信息
 			content+="<option value='"+arr[i][0]+"'>"+arr[i][1]+"</option>";
 			 
 			// alert(content);		
 		}
 	}
 	//追加 
 	shengelement.innerHTML=content;
}
//市
function run1(obj){
	// alert(obj)
	var shielement =document.getElementById("id2");
	var content="<option>请输入</option>";
	for(var i=0;i<arr.length;i++){
		if(arr[i][2]==obj){
			content+="<option value='"+arr[i][0]+"'>"+arr[i][1]+"</option>";
		}
	}
	shielement.innerHTML=content;

	//因为当我们重新选择市的时候想让县的信息跟随着变化所以才有下面两行代码
	var xianelement =document.getElementById("id3");
	xianelement.innerHTML=content;

}
//县
function run2(obj){
	// alert(obj)
	var xianelement =document.getElementById("id3");
	var content="<option>请输入</option>";
	for(var i=0;i<arr.length;i++){
		if(arr[i][2]==obj){
			content+="<option>"+arr[i][1]+"</option>";
		}
	}
	xianelement.innerHTML=content;
}
</script>

bqy0108

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Js 三级联动(省,市,县)

需求:创建一个简单的三级联动,并且进入页面后显示省的下拉框首先我们先在body标签内创建3个下拉选项(select),并在script中创建数组然后定义id ,通过id获取到当前元素的.然后进入定义好的方法获取到省的信息获取市的信息获取县的信息因为是老师讲完之后自己理解然后加以注释如有错误还望大家及时指导感谢~~`<!DOCTYPE html><html><head> <title&...
复制链接

扫一扫