JavaScript开发三级联动之核心JS

本章介绍的就是最关键的JS代码了，不多说，先看代码：

<script>
    //声明省
    var oProc = ["安徽","上海","山东"];  //直接声明array
    //声明市
    var oCity = [
        ["合肥","淮南","芜湖"],
        ["浦东","闵行","浦西"],
        ["济南","青岛","枣庄"]
    ];
    //声明区
    var oDist = [
        [
            ["政务区","庐阳区","蜀山区"],
            ["田家庵区","大通区","九龙岗区"],
            ["镜湖区","鸠江区","三山区"]
        ],
        [
            ["浦东1","浦东2","浦东3"],
            ["闵行1","闵行2","闵行3"],
            ["浦西1","浦西","浦西3"]
        ],
        [
            ["历下区","天桥区","长清区"],
            ["市南区","市北区","李沧区"],
            ["薛城区","市中区","峄城区"]
        ]
    ];
    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++){
            //创建元素节点
            var oOpt = document.createElement("option");
            //创建文本节点
            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)测试一下，获取的结果是1,2,3，而我们数组的起始值是0，所以要减1,。比方说，我们选择安徽，安徽在数组中排第一个，但是起始下标是0，我们用

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