原生JS实现多级联动

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

一只风小风

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

阅读量1k

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_46563201/article/details/123225450

版权

关于select下拉框的操作，参考：https://www.imooc.com/article/10487

多级联动：有三个下拉框，在你选择第一个下拉框后自动根据第一个的内容去生成第二个下拉框的内容，第三个下拉框的内容同样如此，注意是自动的，意思是：在选择第一个下拉框的时候第二个和第三个框的值是同时改变的

针对第一个下拉框一般的做法是在页面加载时就将内容进行初始化填充进去

用原生JS实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<select name="Province" id="Province">
			<option>--选择省--</option>
		</select>
		
		<select name="city" id="city">
			<option>--选择市--</option>
		</select>
		
		<select name="Area" id="Area">
			<option>--选择区--</option>
		</select>
		
		
	</body>
	
	<script type="text/javascript">
		//当页面加载时就将省的数据添加到选择省的下拉框中
		window.onload = function(){
			debugger
			//省的数据
			var ProvinceArray = ["湖北省","河北省","江苏省"," 浙江省","四川省"];
			for(let i = 0; i < ProvinceArray.length; i++)
			{
				//第一个属性代表标签内的内容，第二个代表value值
				let opt = new Option(ProvinceArray[i],ProvinceArray[i]);
				document.getElementById("Province").options.add(opt)
			}
		}
	</script>
</html>

后面的下拉框就根据前面的值进行初始化即可

全部测试代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<select name="Province" id="Province" >
			<option hidden>--选择省--</option>
		</select>
		
		<select name="city" id="city">
			<option hidden>--选择市--</option>
		</select>
		
		<select name="Area" id="Area">
			<option hidden>--选择区--</option>
		</select>
		
		
	</body>
	
	<script type="text/javascript">
		//当页面加载完成后执行的内容
		window.onload = function(){
			
			//省的数据
			var ProvinceArray = ["湖北省","河北省","江苏省","浙江省","四川省"];
			//对应每个省的市的数据
			var cityArray = [
					['武汉市','黄冈市','咸宁市','宜昌市','随州市'],
					['唐山市','邢台市','保定市','衡水市','沧州市'],
					['南京市','徐州市','苏州市','南通市','扬州市'],
					['杭州市','宁波市','温州市','绍兴市','金华市'],
					['成都市','眉山市','德阳市','绵阳市','广元市'],
							];
			//这里就只写每个省对应的第一个市的区信息吧  数据量表小了 但是思路是一样的
			var AreaArray = [
				['蔡甸区','洪山区','汉阳区','武昌区','东西湖区'],
				['路南区','路北区','丰南区','开平区','丰润区'],
				['玄武区','浦口区','江宁区','鼓楼区','雨花台区'],
				['上城区','西湖区','萧山区','余杭区','富阳区'],
				['锦江区','武侯区','双流区','温江区','成华区'],
							];
							
			
			
			//将省的数据添加到选择省的下拉框中
			for(let i = 0; i < ProvinceArray.length; i++)
			{
				//第一个属性代表标签内的内容，第二个代表value值
				let opt = new Option(ProvinceArray[i],ProvinceArray[i]);
				document.getElementById("Province").options.add(opt)
			}
			
			//根据第一个下拉框的值初始化第二个和第三个下拉框的内容
			document.getElementById("Province").onchange = function(){
				
				//清除第二个下拉框中前面的初始化内容
				document.getElementById("city").options.length= 0
				//清除第三个下拉框中前面的初始化内容
				document.getElementById("Area").options.length= 0
				//如果当前第二个下拉框的值为
				//cityArray的下标
				let citArrayindex = -1;
				switch(this.value)
				{
					case '湖北省': citArrayindex = 0; break;
					case '河北省': citArrayindex = 1; break;
					case '江苏省': citArrayindex = 2; break;
					case '浙江省': citArrayindex = 3; break;
					case '四川省': citArrayindex = 4; break;
					//当没有选择时默认是 "选择市" 注意这里用的是set方法 不是add 不然会出现两个 --选择市-- 下面的区同样如此
					default: document.getElementById("city").options.set(new Option("--选择市--"));break;
				}
				if(citArrayindex != -1)
				{
					//初始化第二个框中的内容
					for(let i = 0; i < cityArray[citArrayindex].length; i++)
					{
						//第一个属性代表标签内的内容，第二个代表value值
						let opt = new Option(cityArray[citArrayindex][i],cityArray[citArrayindex][i]);
						document.getElementById("city").options.add(opt)
					}
					
					//初始化第三个框中的内容
					for(let i = 0; i < AreaArray[citArrayindex].length; i++)
					{
						//第一个属性代表标签内的内容，第二个代表value值
						let opt = new Option(AreaArray[citArrayindex][i],AreaArray[citArrayindex][i]);
						document.getElementById("Area").options.add(opt)
					}
				}
				
			}
			
			//根据第二个下拉框的值初始化第三个下拉框的内容
			document.getElementById("city").onchange = function(){
				//清除第三个下拉框中前面的初始化内容
				document.getElementById("Area").options.length= 0
				//cityArray的下标
				let AreaArrayindex = -1;
				
				switch(this.value)
				{
					case '武汉市': AreaArrayindex = 0; break;
					case '唐山市': AreaArrayindex = 1; break;
					case '南京市': AreaArrayindex = 2; break;
					case '杭州市': AreaArrayindex = 3; break;
					case '成都市': AreaArrayindex = 4; break;
					//当没有选择时默认是 "请选择区“
					default: document.getElementById("Area").options.set(new Option("--选择区--"));break;
				}
				if(AreaArrayindex != -1)
				{
					//初始化第三个框的内容
					for(let i = 0; i < AreaArray[AreaArrayindex].length; i++)
					{
						//第一个属性代表标签内的内容，第二个代表value值
						let opt = new Option(AreaArray[AreaArrayindex][i],AreaArray[AreaArrayindex][i]);
						document.getElementById("Area").options.add(opt)
					}
				}
			}
		}
	</script>
</html>