首頁 > web前端 > js教程 > javascript三級連動影片資料分享

javascript三級連動影片資料分享

巴扎黑
發布: 2017-08-28 14:06:13
原創
2127 人瀏覽過

本影片介紹的知識點,是我們日常工作中常能用到的三級連動。例如我們在網路上買東西,填寫收貨地址時,有的會出現下拉框,讓我們去進行選擇地址。還有一些別的分類,例如你想買衣服,就會選擇男裝女裝童裝,男裝下面又會有西裝,運動休閒等等類似的。所以,學好本影片內容,將會對以後工作非常有用。

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==&#39;-1&#39;){
            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三級連動影片資料分享的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板