請選擇地區： ...
<p>
請選擇地區：
<select name="" id="proc">
<option value="">--請選擇省--</option>
</select>
<select name="" id="city">
<option value="">--請選擇市--</option>
</select>
<select name="" id="dist">
<option value="">--請選擇區--</option>
</select>
</p>
<body>
<script>
//聲明省
var oProc = ["安徽", "上海", "山東"]; //直接聲明array
//聲明市
var oCity = [
["合肥", "淮南", "蕪湖"],
["浦東", "閔行", "浦西"],
["濟南", "青島", "棗莊"]
];
//聲明區
var oDist = [
[
["政務區", "廬陽區", "蜀山區"],
["田家庵區", "大通區", "九龍崗區"],
["鏡湖區", "鳩江區", "三山區"]
],
[
["浦東1", "浦東2", "浦東3"],
["閔行1", "閔行2", "閔行3"],
["浦西1", "浦西", "浦西3"]
],
[
["歷下區", "天橋區", "長清區"],
["市南區", "市北區", "李滄區"],
["薛城區", "市中區", "嶧城區"]
]
];
// 目標：實現三級聯動
/// 分析 一下
// 1. 一進來應該載入所有的省的內容
// 2. 選擇了省以後 ，動態載入當前省下麵的所有的城市
// 3. 選擇了城市以後，動態去載入當前城市下麵所有的縣
// 1. 一進來應該載入所有的省的內容
var proc = document.getElementById('proc');
var city = document.getElementById('city');
var dist = document.getElementById('dist');
for (var i = 0; i < oProc.length; i++) {
var op = document.createElement('option');
op.innerText = oProc[i];
proc.appendChild(op);
}
// 2. 選擇了省以後 ，動態載入當前省下麵的所有的城市
proc.onchange = function () {
if (proc.options.selectedIndex == 0) { //判斷如果都沒選中的時候,代碼不執行
city.options.length = 1;
dist.options.length = 1;
return false;
}
city.options.length = 1;
dist.options.length = 1;
var select = proc.options.selectedIndex; //返回的是當前省被選中的那個索引值 ，這個值是從1 開始
console.log(select)
var index = select - 1;
for (var j = 0; j < oCity[index].length; j++) {
var cop = document.createElement('option');
cop.innerText = oCity[index][j];
city.appendChild(cop);
}
}
// 3. 選擇了城市以後，動態去載入當前城市下麵所有的縣
city.onchange = function () {
if (city.options.selectedIndex == 0) {
dist.options.length = 1;
return false;
}
dist.options.length = 1;
var Cselct = city.options.selectedIndex;
//這個是是拿到的城市選中
console.log(Cselct)
// 的那個
var Sselct = proc.options.selectedIndex // 拿到選中的省的索引
for (var i = 0; i < oDist[Sselct - 1][Cselct - 1].length; i++) {
var dop = document.createElement('option');
dop.innerText = oDist[Sselct - 1][Cselct - 1][i];
dist.appendChild(dop);
}
}
</script>
