本章介紹的就是最關(guān)鍵的JS程式碼了，不多說，先看程式碼：

<script>
    //聲明省
    var oProc = ["安徽","上海","山東"];  //直接聲明array
    //聲明市
    var oCity = [
        ["合肥","淮南","蕪湖"],
        ["浦東","閔行","浦西"],
        ["濟(jì)南","青島","棗莊"]
    ];
    //聲明區(qū)
    var oDist = [
        [
            ["政務(wù)區(qū)","廬陽區(qū)","蜀山區(qū)"],
            ["田家庵區(qū)","大通區(qū)","九龍崗區(qū)"],
            ["鏡湖區(qū)","鳩江區(qū)","三山區(qū)"]
        ],
        [
            ["浦東1","浦東2","浦東3"],
            ["閔行1","閔行2","閔行3"],
            ["浦西1","浦西","浦西3"]
        ],
        [
            ["歷下區(qū)","天橋區(qū)","長清區(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é)點
            var oOpt = document.createElement("option");
            //創(chuàng)建文本節(jié)點
            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>

for(var i =0;i<oCity[num-1].length;i++)這個地方有點複雜，可能會想不明白，解釋一下：[num-1]是什麼意思，為什麼要減1呢？

我們用console.log(num)測試一下，得到的結(jié)果是1,2,3，而我們陣列的起始值是0，所以要減1,。比方說，我們選擇安徽，安徽在數(shù)組中排第一個，但是起始下標(biāo)是0，我們用

selectedIndex獲取的值是1，所以，想取到安徽，只能先減1.