JavaScript实现三级列联

 body里面先建立下拉列表：

<select id="province" onchange="changeProvince(this.value)">
<option>--请选择--</option>
<option value="0">湖北</option>
<option value="1">湖南</option>
<option value="2">甘肃</option>
<option value="3">河南</option>
</select>
<select id="city" onchange="changeCity(this.value)">
<option>--请选择--</option>
</select>
<select id="area">
<option>--请选择--</option>
</select>

 JavaScript写在body里面：

var pros=document.getElementById("province");
var cities=document.getElementById("city");
var areas=document.getElementById("area");
var cityList=
[
	["武汉","荆州","孝感","黄冈"],
	["长沙","岳阳","株洲","衡阳"],
	["兰州","天水","敦煌","武威"],
	["郑州","洛阳","开封","商丘"]
];
var areaList=
[
	[
		["汉阳","汉口","武昌"],
		["荆门","荆门","荆门"],
		["大悟县","安陆市","汉川市"],
		["麻城","红安","蕲春"],
	],
	[
		["长沙1","长沙2","长沙3"],
		["岳阳1","岳阳2","岳阳3"],
		["株洲1","株洲2","株洲3"],
		["衡阳1","衡阳2","衡阳3"],
	],
	[
		["兰州1","兰州2","兰州3"],
		["天水1","天水2","天水3"],
		["敦煌1","敦煌2","敦煌3"],
		["武威1","武威2","武威3"],
	],
	[
		["郑州1","郑州2","郑州3"],
		["洛阳1","洛阳2","洛阳3"],
		["开封1","开封2","开封3"],
		["商丘1","商丘2","商丘3"],
	],
];
function changeProvince(val){
	while(cities.options.length>1){
		cities.removeChild(cities.lastChild);
	}
	while(areas.options.length>1){
		areas.removeChild(areas.lastChild);
	}
	if(!isNaN(val)){
		for(var i=0;i<cityList[val].length;i++){
			var optCity=document.createElement("option");
			optCity.innerHTML=cityList[val][i];
			optCity.value=i;
			cities.appendChild(optCity);
		}
	}
}
function changeCity(val){
	while(areas.options.length>1){
		areas.removeChild(areas.lastChild);
	}
	if(!isNaN(val)){
		for(var i=0;i<areaList[pros.value][val].length;i++){
			var optArea=document.createElement("option");
			optArea.innerHTML=areaList[pros.value][val][i];
			areas.appendChild(optArea);
		}
	}
}