三级联动效果

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<script>

//方法一
var myproc = ["四川省","云南省","贵州省","重庆市"];
var mycity = new Array();
mycity[0] = ["成都市","德阳市","绵阳市","广元市"];
mycity[1] = ["昆明市","大理市","玉溪市"];
mycity[2] = ["贵阳市","遵义市"];

var myregion = new Array();
myregion[0]=new Array();
myregion[1]=new Array();
myregion[2]=new Array();
myregion[0][0]=["武侯区","锦江区","高新区","青羊区","金牛区"];
myregion[0][1]=["一区","二区"];
myregion[0][2]=["二一区","二二区"];
myregion[0][3]=["三一区","三二区"];
myregion[1][0]=["一区1","二区1"];
myregion[1][1]=["二一区1","二二区1"];
myregion[1][2]=["三一区1","三二区1"];
myregion[2][0]=["一区2","二区2"];
myregion[2][1]=["二一区2","二二区2"];

function addproc(){
var proc = document.getElementById("proc");
for(var i=0; i<myproc.length; i++){
var op = document.createElement("option");
var city = document.createTextNode(myproc[i]);
op.appendChild(city);
proc.appendChild(op);
}
}

function selproc(){
var proc = document.getElementById("proc");
var city = document.getElementById("city");
var region = document.getElementById("region");
city.options.length=1;
region.options.length=1;
if(proc.value=="-1"){
document.getElementById("mytxt").value="";
}else{
var num = proc.options.selectedIndex;
for(var i=0; i<mycity[num-1].length; i++){
var op = document.createElement("option");
var city1 = document.createTextNode(mycity[num-1][i]);
op.appendChild(city1);
city.appendChild(op);
}
}
}

function selcity(){
var proc = document.getElementById("proc");
var city = document.getElementById("city");
var region = document.getElementById("region");
region.options.length=1;
if(proc.value=="-1"){
document.getElementById("mytxt").value="";
}else{
var num = proc.options.selectedIndex;
var n = city.options.selectedIndex;
for(var i=0; i<myregion[num-1][n-1].length; i++){
var op = document.createElement("option");
var r = document.createTextNode(myregion[num-1][n-1][i]);
op.appendChild(r);
region.appendChild(op);
}
}
}

//方法二
/*function selproc(){
var proc = document.getElementById("proc");
var city = document.getElementById("city");
city.options.length=1;
if(proc.value=="-1"){
document.getElementById("mytxt").value="";
}else{
if(proc.value=="四川省"){
var op11 = document.createElement("option");
var city11 = document.createTextNode("成都市");
op11.appendChild(city11);
city.appendChild(op11);

var op12 = document.createElement("option");
var city12 = document.createTextNode("德阳市");
op12.appendChild(city12);
city.appendChild(op12);
}else if(proc.value=="云南省"){
var op21 = document.createElement("option");
var city21 = document.createTextNode("昆明市");
op21.appendChild(city21);
city.appendChild(op21);

var op22 = document.createElement("option");
var city22 = document.createTextNode("大理市");
op22.appendChild(city22);
city.appendChild(op22);
}else if(proc.value=="贵州省"){
var op31 = document.createElement("option");
var city31 = document.createTextNode("贵阳市");
op31.appendChild(city31);
city.appendChild(op31);
}
document.getElementById("mytxt").value=proc.value;
}
}*/
</script>
</head>
<body onload="addproc()">
选择省市地区：
<select id="proc" name="proc" onchange="selproc()">
<option value="-1">--请选择省份--</option>

</select>
<select id="city" name="city" onchange="selcity()">
<option value="-1">--请选择城市--</option>
</select>
<select id="region" name="region" onchange="selregion()">
<option value="-1">--请选择地区--</option>
</select>
<input id="mytxt" />
</body>
</html>

posted @ 2014-04-13 12:09  1号菜鸟  阅读(610)  评论(0)    收藏  举报