javascript三级联动视频资料分享

本视频介绍的知识点，是我们日常工作中经常能用到的三级联动。比如我们在网上买东西，填写收货地址时，有的会出现下拉框，让我们去进行选择地址。还有一些别的分类，比如你想买衣服，就会选择男装女装童装，男装下面又会有西装，运动休闲等等类似的。所以，学好本视频内容，将会对以后工作非常有用。

视频播放地址：http://www.php.cn/course/198.html

本视频难点在于JavaScript核心代码的编写，这是对JavaScript基础掌握的一次实际运用：

 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);
            }
        }
    }

本视频讲师为PHP中文网的年轻讲师季伟主讲，讲课生动有趣，连敲带讲两不耽误，充分考虑到学生的感受。基础课程由浅入深，实战课程由简到繁。他的授课宗旨就是，在玩的过程中，学会你想学的，学习就和玩是一样的。代表作品：《弹指间学会PHP》等，大家可以去学习研究。

以上就是javascript三级联动视频资料分享的详细内容，更多请关注其它相关文章！