用js实现三级联动

今天小编带你了解一下三级联动，所谓三级联动就是为了完成一些选择权利。下面跟随小编的脚步带你走进三级联动：

html代码：

<select name="sheng" id="sheng">
			<!-- <option value="">请选择</option> -->
			<!-- <option value="0">北京</option>
			<option value="1">河南</option>
			<option value="2">山西</option>
			<option value="3">湖北</option> -->
		</select>
		<select name="shi" id="shi">
			<!-- <option value="0,1">昌平</option>
			<option value="0,2">延庆</option>
			<option value="0,3">海淀</option>
			<option value="0,4">朝阳</option> -->
		</select>
		<!-- <select name="shi2">
			<option value="1,1">南阳</option>
			<option value="1,2">洛阳</option>
			<option value="1,3">安阳</option>
			<option value="1,4">郑州</option>
		</select> -->
		<select name="xian" id="xian">
			<!-- <option value ="0,2,1">大榆树镇</option>
			<option value ="0,2,2">北科院</option> -->
		</select>

js代码：

<script type="text/javascript">
			var address = {
				// 0 省份
				"0":{
					"1":"北京",
					"2":"河南",
					"3":"黑龙江"
				},
				"0,1":{
					"4":"昌平区",
					"5":"延庆区",
					"6":"海淀区"
				},
				"0,1,4":{
					"7":"回龙观",
					"8":"霍营"
				},
				"0,1,5":{
					"9":"大榆树镇",
					"10":"延庆城区"
				},
				"0,1,6":{
					"11":"海淀五路居",
					"12":"田村"
				},
				"0,2":{
					"13":"郑州",
					"14":"南阳",
					"15":"安阳"
				},
				"0,2,13":{
					"16":"二七区",
					"17":"金水区",
					"18":"上街区"
				},
				"0,2,14":{
					"19":"邓州",
					"20":"管城区",
					"21":"方城"
				}
			}
			
			// 获取所有元素   省 市 县
			var sheng = document.getElementById("sheng")
			var shi = document.getElementById("shi")
			var xian = document.getElementById("xian")
			
			//a- 遍历展示省的数据
			// 1- 定义一个变量名为 strOption1 用于存储字符串 并做字符串的拼接
			var strOption1 = "<option>请选择</option>"
			// 3- 将所有的数据遍历展示option中
			for(var i in address[0]){
				console.log(i)
				console.log(address[0][i])
				// 字符串拼接 将 对象中的 键与值拼接到option中
				strOption1 += '<option value="0,'+i+'">'+address[0][i]+'</option>'
			}
			console.log(strOption1)
			// 2- 将字符串类型的标签数据存储到省select标签中
			sheng.innerHTML = strOption1
			
			// b- 遍历展示市的数据
			sheng.onchange = function(){
				// 1- 定义一个变量名为 strOption2 用于存储字符串 并做字符串的拼接
				var strOption2 = "<option>请选择</option>"
				// console.log(this.value)
				// 3- 将所有的数据遍历展示option中
				for(var j in address[this.value]){
					console.log(j)
					console.log(address[this.value][j])
					strOption2 += '<option value="'+this.value+','+j+'">'+address[this.value][j]+'</option>'
				}
				// 2- 将字符串类型的标签数据存储到省select标签中
				shi.innerHTML = strOption2
			}
			
			// c-遍历数据展示到县
			// 给市绑定onchange事件 当事件出发时执行县的数据遍历
			shi.onchange = function(){
				// 1- 定义一个变量名为 strOption3 用于存储字符串 并做字符串的拼接
				var strOption3 = "<option>请选择</option>"
				// 3- 将所有的数据遍历展示option中
				for(var k in address[this.value]){
					console.log(address[this.value])
					console.log(address[this.value][k])
					strOption3+='<option value="'+this.value+','+k+'">'+address[this.value][k]+'</option>'
				}
				// 2- 将字符串类型的标签数据存储到省select标签中
				xian.innerHTML = strOption3
			}
		</script>

css样式：

你们可以自己看着来

---

总结：