級聯下拉列表（三級）
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<script>
//宣告省,一維陣列
var provinces = ["廣西", "廣東", "湖南"]; //直接宣告Array
//宣告市，二維陣列
var cities = [
["桂平", "柳州", "南寧"],
["中山", "廣州","珠海"],
["衡陽", "湘潭","長沙"]
];
//宣告鄉鎮，三維陣列
var areas = [
[
["桂平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"]
]
]
//初始化省份
window.onload=function initProvince(){
var pro = document.getElementById("province");
for(var i=0;i<provinces.length;i++){
pro.add(new Option(provinces[i],i),null); //i為value值
}
}
var pindex;
//省份變化，城市也跟著變化
function changeProvince(){
var province = document.getElementById("province");
var ci = document.getElementById("city");
var country = document.getElementById("countrySide");
ci.options.length=0;//清空城市列表
country.options.length=0;//清空鄉鎮列表
pindex = province.value;//省份下標
//哈哈，我愛編程式碼，如果選擇省份為：請選擇省份，那麼城市和鄉鎮也跟著改變為請選擇。。。
if(-1==pindex){
ci.add(new Option("--請選擇省份--","-2"),null);
country.add(new Option("--請選擇省份--","-2"),null);
}
var city = cities[pindex];//省份對應的城市（預設值）
var quxu = areas[pindex][0];//城市對應的鄉鎮
//城市變化
for(var i=0;i<city.length;i++){
ci.add(new Option(city[i],i),null);////i為value值
}
//鄉鎮變化（預設值）
for(var i=0;i<quxu.length;i++){
country.add(new Option(quxu[i],i),null);
}
}
//鄉鎮跟著城市變化
function changeCity(){
var countrySide = document.getElementById("countrySide");
countrySide.options.length=0;//清空鄉鎮列表
var cindex = document.getElementById("city").value;//城市的下標
var count = areas[pindex][cindex];//省份對應的城市所對應的鄉鎮
for(var i=0;i<count.length;i++){
countrySide.add(new Option(count[i],i),null);
}
}
</script>
</head>
<body>
<h2>省市鄉</h2>
省份選擇：<select id="province" onchange="changeProvince()">
<option value="-1">--請選擇省份--</option>
</select>
城市選擇：<select id="city" onchange="changeCity()">
<option value="-1">--請選擇城市--</option>
</select>
鄉鎮選擇：<select id="countrySide">
<option value="-1">--請選擇鄉鎮--</option>
</select>
</body>
</html>
未選擇時：
選擇任意省份，市和鄉鎮也預設選擇了
選擇城市，鄉鎮也跟著改變：
如果選擇請選擇省份，城市和鄉鎮也跟著變為請選擇。。。
