<!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>
原文：http://www.cnblogs.com/jiablog/p/3662012.html