三级联动的制作

body部分

省份<select id="pro" onchange="getcity()">  <!--创造三个下拉选项栏-->
	     <option>选择省份</option>
	</select>
	城市<select id="city" onchange="getarea()">
		<option>选择城市</option>
	</select>
	区<select id="area">
		<option>选择区</option>
	</select>

添加js的方式

<script type="text/javascript">
	var sheng=["湖北省","湖南省","广东省"];
	var city=[["武汉市","宜昌市","咸宁市"],["长沙市","常德市","邵阳市"],["广州市","深圳市","惠州市"]]
	var ar=[[["武昌区","洪山区"],["夷陵区"],["咸安区"]],[["芙蓉区"],["鼎城区"],["双清区"]],[["荔湾区"],["福田区"],["惠阳区"]]]
	window.onload=start;
	var s=document.getElementById("pro");  //设置初始的省份选项
	function start(){
		
		for(var i=0;i<sheng.length;i++){
			var op=document.createElement("option");
			op.innerHTML=sheng[i];
			s.appendChild(op);      //添加几个可选择的省份到第一个选项下拉栏
		}
	}
	var c=document.getElementById("city")
	function getcity(){
		c.length=1;
		var sw=s.selectedIndex;//找到省份位置，从而好使后面的城市与省份对应
		var citys=city[sw-1];
		for(var j=0;j<citys.length;j++){
			var op1= document.createElement("option");
			op1.innerHTML=citys[j];
			c.appendChild(op1);
		}
	}
	var a=document.getElementById("area")
	function getarea(){
		a.length=1;
		var sw=s.selectedIndex;//省份位置，与上一步中的sw一样
		var cw=c.selectedIndex;//城市位置
		var citys=ar[sw-1];//先把三维数组中的区域找出来，确定是哪个省里的几个区
		var ars=citys[cw-1];//再通过之前定位的城市位置，把对应的区对应给相应的城市
		for(var k=0;k<ars.length;k++){
			var op2=document.createElement("option");
			op2.innerHTML=ars[k];
			a.appendChild(op2);
		}
	}
</script>

效果图