JavaScript開發(fā)三級(jí)聯(lián)動(dòng)之全代碼展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三級(jí)聯(lián)動(dòng)</title>
<style>
*{margin:0;padding:0;}
</style>
</head>
<body>
<div>
請(qǐng)選擇地區(qū)：
<select name="" id="proc" onchange="showCity()">
<option value="">--請(qǐng)選擇省--</option>
</select>
<select name="" id="city" onchange="showDist()">
<option value="">--請(qǐng)選擇市--</option>
</select>
<select name="" id="dist">
<option value="">--請(qǐng)選擇區(qū)--</option>
</select>
</div>
<script type="text/javascript" src=""></script>
<script>
//聲明省
var oProc = ["安徽","上海","山東"]; //直接聲明array
//聲明市
var oCity = [
["合肥","淮南","蕪湖"],
["浦東","閔行","浦西"],
["濟(jì)南","青島","棗莊"]
];
//聲明區(qū)
var oDist = [
[
["政務(wù)區(qū)","廬陽(yáng)區(qū)","蜀山區(qū)"],
["田家庵區(qū)","大通區(qū)","九龍崗區(qū)"],
["鏡湖區(qū)","鳩江區(qū)","三山區(qū)"]
],
[
["浦東1","浦東2","浦東3"],
["閔行1","閔行2","閔行3"],
["浦西1","浦西","浦西3"]
],
[
["歷下區(qū)","天橋區(qū)","長(zhǎng)清區(qū)"],
["市南區(qū)","市北區(qū)","李滄區(qū)"],
["薛城區(qū)","市中區(qū)","嶧城區(qū)"]
]
];
var oproc = document.getElementById("proc");
var ocity = document.getElementById("city");
var odist = document.getElementById("dist");
window.onload = function(){
for(var i =0;i<oProc.length;i++){
//創(chuàng)建元素節(jié)點(diǎn)
var oOpt = document.createElement("option");
//創(chuàng)建文本節(jié)點(diǎn)
var oTxt = document.createTextNode(oProc[i]);
oOpt.appendChild(oTxt);
oproc.appendChild(oOpt);
}
};
function showCity(){
if(oproc.value=="-1"){
ocity.options.length = 1;
odist.options.length = 1;
}else{
ocity.options.length = 1;
odist.options.length = 1;
var num = oproc.options.selectedIndex;
//console.log(num);
for(var i =0;i<oCity[num-1].length;i++){
var oOpt = document.createElement("option");
var oTxt = document.createTextNode(oCity[num-1][i]);
oOpt.appendChild(oTxt);
ocity.appendChild(oOpt);
}
}
}
function showDist(){
if(ocity.value=='-1'){
odist.options.length = 1
}else{
odist.options.length = 1;
var numPro = oproc.options.selectedIndex;
var numCity = ocity.options.selectedIndex;
for(var i=0;i<oDist[numPro-1][numCity-1].length;i++){
var oOpt = document.createElement("option");
var oTxt = document.createTextNode(oDist[numPro-1][numCity-1][i]);
oOpt.appendChild(oTxt);
odist.appendChild(oOpt);
}
}
}
</script>
</body>
</html>
