声明在前，本文仅供学习参考，可能会有一些错误，实现方法也并不是最好的，欢迎大家纠错！

本文用到的关键知识点有以下：

1.select.options.add(new Option(text,value));  //给select添加option选项

2.字典存数据以键值对形式{key:value}，如data={'姓名':'张三','密码':'123456'},本案例用来存各省市区。

3.select标签的onchange属性，在元素值改变时触发事件。

详细步骤(完整代码在最下面)：

一、准备好需要的数据字典，代码如下（本文只是作为示例，只列出部分省市），格式为｛1：｛1：[ ] ｝｝，即字典里面的元素还是字典，最里面那层是数组。

var arrData = {
        江西省:{南昌市: ['青山湖区','经开区','东湖区','南昌县'],
                吉安市: ['青原区','吉州区','吉安县','泰和县','新干县'],
                赣州市: ['河源市','兴国县','yy县','xx县'],
                宜春市: ['袁州区','万载县']},
        湖南省:{邵阳市: ['邵阳县','1区','2区'],
                长沙市: ['1区','2区','3区','4区'],
                岳阳市: ['5区','6区','7区','8区','9区','10区']},
        广东省:{广州市: ['11区','12区','13区'],
                东莞市: ['厚街镇','14区','15区','16区','17区'],
                中山市: ['18区','19区','20区','21区']},
        江苏省:{苏州市: ['22区','23区','24区','25区','26区'],
                徐州市: ['27镇','28区','29区','30区'],
                镇江市: ['31区','32区','33区','34区']}
    };

二、构建好HTML静态页面，代码如下（本文只是作为示例，只列出部分省市）：

注意，为了接下来能够方便访问字典，把option里面的value属性的值全部和option的内容一样。

<span>省</span>
	<select id="province" onchange="changeProvince()">
		<option value="--请选择--">--请选择--</option>
	</select>
	<span>市</span>
	<select id="city" onchange="changeCity()">
		<option value="">--请选择--</option>
	</select>
	<span>区</span>
	<select id="area" onchange="changeCity()">
		<option value="">--请选择--</option>
	</select>

 三、通过document.getElementById()方法分别获取到三个select（省市区）结点：

var province = document.getElementById("province");
    var city = document.getElementById("city");
    var area = document.getElementById("area");

四、初始化省份的标签，即遍历arrData的key值，添加到下拉列表中：

window.onload = function(){
	for(key in arrData){ 	// 初始化省份的标签，即遍历arrData的key值，添加到下拉列表中
		province.options.add(new Option(key, key));
	}
}

五、实现changeProvince()方法，当选择了某个省的时候，市那一栏要相应的改变：

function changeProvince(){
	city.length = 1; //当重新选择某个省时，应该把市和区的option清空，因为默认栏是“--请选择--”，故把长度变为1.
	area.length = 1;  //同上
	for(key in arrData[province.value])
		//注意字典中key的用法，字典是以键值对{key:value}存储的。province.value就是选择的省，比如选了江西省，那么province.value就是江西省。
		city.options.add(new Option(key, key)); //options.add(new Option(text,value));

}

六、实现changeCity()方法，原理同上：

function changeCity(){
	area.length = 1;  //当重新选择某个市时，应该把区的option清空，因为默认栏是“--请选择--”，故把长度变为1.
	for(key in arrData[province.value][city.value]){
		var a = arrData[province.value][city.value][key];
		area.options.add(new Option(a, a));
	}
}

效果图如下： 

java省市区三级联动知乎 js省市区三级联动_ci

附完整代码：

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<title>三级联动Demo</title>
	</head>
	<body>
		<span>省</span>
		<select id="province" onchange="changeProvince()">
			<option value="--请选择--">--请选择--</option>
		</select>
		<span>市</span>
		<select id="city" onchange="changeCity()">
			<option value="">--请选择--</option>
		</select>
		<span>区</span>
		<select id="area" onchange="changeCity()">
			<option value="">--请选择--</option>
		</select>
	</body>
	<script>
		var arrData = {
			江西省:{南昌市: ['青山湖区','经开区','东湖区','南昌县'],
					吉安市: ['青原区','吉州区','吉安县','泰和县','新干县'],
					赣州市: ['河源市','兴国县','yy县','xx县'],
					宜春市: ['袁州区','万载县']},
			湖南省:{邵阳市: ['邵阳县','1区','2区'],
					长沙市: ['1区','2区','3区','4区'],
					岳阳市: ['5区','6区','7区','8区','9区','10区']},
			广东省:{广州市: ['11区','12区','13区'],
					东莞市: ['厚街镇','14区','15区','16区','17区'],
					中山市: ['18区','19区','20区','21区']},
			江苏省:{苏州市: ['22区','23区','24区','25区','26区'],
					徐州市: ['27镇','28区','29区','30区'],
					镇江市: ['31区','32区','33区','34区']}
		};
		
		var province = document.getElementById("province");
		var city = document.getElementById("city");
		var area = document.getElementById("area");
		
		window.onload = function(){
			for(key in arrData){ 	// 初始化省份的标签，即遍历arrData的key值，添加到下拉列表中
				province.options.add(new Option(key, key));
			}
		}
	 
		function changeProvince(){
			city.length = 1; //当重新选择某个省时，应该把市和区的option清空，因为默认栏是“--请选择--”，故把长度变为1.
			area.length = 1;  //同上
			for(key in arrData[province.value])
				//注意字典中key的用法，字典是以键值对{key:value}存储的。province.value就是选择的省，比如选了江西省，那么province.value就是江西省。
				city.options.add(new Option(key, key)); //options.add(new Option(text,value));
	 
		}
	 
		function changeCity(){
			area.length = 1;  //当重新选择某个市时，应该把区的option清空，因为默认栏是“--请选择--”，故把长度变为1.
			for(key in arrData[province.value][city.value]){
				var a = arrData[province.value][city.value][key];
				area.options.add(new Option(a, a));
			}
		}
	</script>
</html>