<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<select style="width: 100px;" id="pre" onchange="chg(this);">
<option value="-1">请选择</option>
</select>
<select style="width: 100px;" id="city" onchange="chg2(this)" ;><option value="-1">请选择</option></select>
<select style="width: 100px;" id="area" onchange="chg3(this)"><option value="-1">请选择</option></select>
<select style="width: 100px;" id="way"><option value="-1">请选择</option></select>
</body>
<script>
//声明省
var pres = ["贵州"]; //直接声明Array
//声明市
var cities = [
["-请选择-","贵阳", "遵义", "安顺"],
];
var areas = [
[
["-请选择-"],
["-请选择-", "云岩区", "南明区"],
["-请选择-", "汇川区", "红花岗区"],
["-请选择-", "平坝区", "普定区"],
]
]
var wayareas = [
[
["-请选择-", "喷水池2", "昌平3"],
["-请选择-", "海淀2", "海淀3"]
],
[
["-请选择-"],
["-请选择-", "上海路", "南京路"],
["-请选择-",, "丁字口", "遵义会议"]
],
[
["-请选择-"],
["-请选择-",, "济南2"],
["-请选择-",, "青岛2"]
]
]
//设置一个省的公共下标
var pIndex = -1;
var preEle = document.getElementById("pre");
var cityEle = document.getElementById("city");
var areaEle = document.getElementById("area");
var wayEle = document.getElementById("way");
//先设置省的值
for (var i = 0; i < pres.length; i++) {
//声明option.<option value="pres[i]">Pres[i]</option>
var op = new Option(pres[i], i);
//添加
preEle.options.add(op);
}
function chg(obj) {
if (obj.value == -1) {
cityEle.options.length = 0;
areaEle.options.length = 0;
}
//获取值
var val = obj.value;
pIndex = obj.value;
//获取ctiry
var cs = cities[val];
//获取默认区
var as = areas[val][0];
//先清空市
cityEle.options.length = 0;
areaEle.options.length = 0;
wayEle.options.length = 0;
for (var i = 0; i < cs.length; i++) {
var op = new Option(cs[i], i);
cityEle.options.add(op);
}
for (var i = 0; i < as.length; i++) {
var op = new Option(as[i], i);
areaEle.options.add(op);
}
}
function chg2(obj) {
var val = obj.selectedIndex;
var as = areas[pIndex][val];
areaEle.options.length = 0;
for (var i = 0; i < as.length; i++) {
var op = new Option(as[i], i);
areaEle.options.add(op);
}
}
function chg3(obj) {
var val = obj.selectedIndex;
var as = wayareas[pIndex][val];
wayEle.options.length = 0;
for (var i = 0; i < as.length; i++) {
var op = new Option(as[i], i);
wayEle.options.add(op);
}
}
</script>
</html>
原文：http://www.cnblogs.com/louby/p/7085534.html