<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>三级联动的省市县下拉菜单</title>
<script>
window.onload = selectPro;
//定义一个作为全局变量的二维数组,结构为:id,名字,父id
var arr = new Array ( );
arr[arr.length] = [1,'北京市',null];
arr[arr.length] = [2,'四川省',null];
arr[arr.length] = [3,'广东省',null];
arr[arr.length] = [4,'北京市',1];
arr[arr.length] = [5,'成都市',2];
arr[arr.length] = [6,'广州市',3];
arr[arr.length] = [7,'深圳市',3];
arr[arr.length] = [8,'武侯区',5];
arr[arr.length] = [9,'青羊区',5];
arr[arr.length] = [10,'白云区',6];
arr[arr.length] = [11,'增城市',6];
arr[arr.length] = [12,'从化市',6];
function selectPro(){
var province = document.getElementById("province");
province.innerHTML ="";
var proStr = '<option value="">--请选择--</option>';
for (var i=0; i<arr.length; i++){
var it = arr[i];
if (it[2] == null){
proStr += '<option value='+it[0]+'>'+it[1]+'</option>';
}
}
province.innerHTML = proStr;
province.onchange = selectCity;
}
function selectCity( ){
var currProId = document.getElementById("province").value;
if (currProId ==''){ return false;}
var city = document.getElementById("city");
city.innerHTML = "";
var cityStr = '<option value="">--请选择--</option>';
for (var i=0; i<arr.length; i++){
var it = arr[i];
if(currProId == it[2]){
cityStr += '<option value='+it[0]+'>'+it[1]+'</option>';
}
}
city.innerHTML = cityStr;
city.onchange = selectArea;
}
function selectArea ( ){
var currCityId = document.getElementById("city").value;
if(currCityId ==''){ return false; }
var area = document.getElementById("area");
area.innerHTML = "";
var areaStr ='<option value="">--请选择--</option>';
for (var i=0; i<arr.length; i++){
var it = arr[i];
if (currCityId == it[2]){
areaStr += '<option value='+it[0]+'>'+it[1]+'</option>';
}
}
area.innerHTML = areaStr;
}
</script>
</head>
<body style="text-align:center">
省份:<select id="province"></select><br>
城市:<select id="city"></select><br>
区县:<select id="area"></select>
</body>
</html>
三级联动的省市县下拉菜单
最新推荐文章于 2024-05-14 14:48:12 发布