【Javascript學習筆記】【DOM案例實戰— —關聯效果】

目錄

• 目錄
• 二級關聯
  • • js部分
    • html部分
• 三級關聯
• 快捷連結（包含各類實踐練習）

二級關聯

js部分

window.onload=function(){
    /*
     *初始化資料
     */
    var linkDatas = {
        depart : [{
            "code":,
            "name":"請選擇"
        },{
            "code":,
            "name":"辦公室"
        },{
            "code":,
            "name":"技術組"
        },],

        job :{
            :[
                "請選擇"
            ],
            :[
                "辦公室主任",
                "辦公室副主任",
                "幹事"
            ],
            :[
                "技術總監",
                "技術副總監",
                "小青"
            ]
        }
    }

    /*
     * 添加option
     *target為目标select，options為資料
     */
    function addOptions(target,options){
        var option = null;
            optionsLength = options.length;

        for(var i =;i<optionsLength;i++){
            option = document.createElement("option");
            option.value = options[i].value;
            option.text = options[i].text;
            target.options.add(option);
        }
    }

    /*
     * 實作二級關聯的函數
     * parents為第一個選擇器，childs為第二個
     */
    function linkage(parents,childs){
        var getDatas_1 = linkDatas.depart,
            getDatas_2 = linkDatas.job,
            init = getDatas_2[],
            pushData = [];

        // 初始化資料
        for(var i in getDatas_1){
            pushData.push({
                "text":getDatas_1[i].name,
                "value":getDatas_1[i].code,
            })
        }

        addOptions(parents,pushData);

        addOptions(childs,[{
            "text" : init,
            "value" : init
        }]);

        // 一旦改變，則二級内容也跟着改變
        parents.onchange = function(){
            // 尋找與上級相關的資料
            var findData = getDatas_2[this.value],
                findDataLength = findData.length,//擷取對應二級資料長度
                pushChangeData = [];
            childs.innerHTML = "";//每次更改清空二級select
            for(var i = ;i<findDataLength;i++){
                pushChangeData.push({
                    "value":findData[i],
                    "text":findData[i],
                });
            }
            console.log(pushChangeData);
            addOptions(childs,pushChangeData);
        }
    }

    // 調用關聯函數
    linkage(document.getElementById("depart"),document.getElementById("job"));
};
           

html部分

部門：<select name="" id="depart"></select>
    職位：<select name="" id="job"></select>
           

三級關聯

還在自我嘗試中

快捷連結（包含各類實踐練習）

全部Javascript學習筆記的目錄 Click Here>>

github源碼下載下傳 Click Here>>