三級聯動

※第一步

const scn = {'south':'北', 'center':'中', 'north':'南'};
let arr = [scn.south, scn.center, scn.north];
arr[scn.south] = ['s1', 's2', 's3'];
arr[scn.center] = ['c1', 'c2'];
arr[scn.north] = ['n1', 'n2', 'n3', 'n4'];
    
arr['s1'] = ['s11', 's12', 's13', 's14', 's15'];
arr['s2'] = ['s21', 's22', 's23', 's24'];
arr['s3'] = ['s31', 's32'];
    
arr['c1'] = ['c11', 'c12'];
arr['c2'] = ['c21', 'c22', 'c23', 'c24'];
    
arr['n1'] = ['n11', 'n12', 'n13'];
arr['n2'] = ['n21', 'n22'];
arr['n3'] = ['n31', 'n32', 'n33'];
arr['n4'] = ['n41', 'n42', 'n43', 'n44', 'n45'];
    
window.onload = function(){
    //alert(arr[0]);//北
    //alert(arr[arr[0]][0]);//s1
    //alert(arr[arr[arr[0]][0]][0]);//s11
    //arr[]裡面包上一層的內容，然後看要顯示第幾個就加[number]
    
    //alert(arr.length); // 3
    //alert(arr[arr[0]].length); // 3
    //alert(arr[arr[arr[0]][0]].length); // 5
    
    //預設為：北/s1/s11
    for(let i=0; i<arr.length; i++){
        let option = new Option();
        option.value = i;
        option.text = arr[i];
        document.getElementById('first').options.add(option);
    }
    
    // arr[arr[0]] = arr[scn.south] = arr['北']
    for(let j=0; j<arr[arr[0]].length; j++){
        let option = new Option(arr[arr[0]][j], j);
        document.getElementById('second').options.add(option);
    }
    
    for(let k=0; k<arr[arr[arr[0]][0]].length; k++){
        let option = new Option(arr[arr[arr[0]][0]][k], k);
        document.getElementById('third').options.add(option);
    }
}
    
function firstChangeSecond(val){
    document.getElementById('second').options.length = 0;
    for(let j=0; j<arr[arr[val]].length; j++){
        let option = new Option(arr[arr[val]][j], j);
        document.getElementById('second').options.add(option);
    }
    
    secondChangeThird(this.getOptionValue('second'));
}
    
function secondChangeThird(val){
    /*
    alert('00=' + arr[arr[arr[0]][0]]);//s11~s15
    alert('10=' + arr[arr[arr[1]][0]]);//c11 c12
    alert('01=' + arr[arr[arr[0]][1]]);//s21~24
    */
    
    let firstSelectValue = this.getOptionValue('first');
    document.getElementById('third').options.length = 0;
    for(let k=0; k<arr[arr[arr[firstSelectValue]][val]].length; k++){
        let option = new Option(arr[arr[arr[firstSelectValue]][val]][k], k);
        document.getElementById('third').options.add(option);
    }
}
    
function getOptionValue(id){
    let ops = document.getElementById(id).options;
    for(let i=0; i<ops.length; i++){
        if(ops[i].selected){
            return i;
        }
    }
}
--------------------
<select id='first' onchange="firstChangeSecond(this.value)"></select>
<select id='second' onchange="secondChangeThird(this.value)"></select>
<select id='third'></select>

※

※第二步，將相同用法提出

window.onload = function(){
    //預設為：北/s1/s11
    changeSelect(arr, 'first');
    changeSelect(arr[arr[0]], 'second');
    changeSelect(arr[arr[arr[0]][0]], 'third');
}
    
function firstChangeSecond(val){
    changeSelect(arr[arr[val]], 'second');
    secondChangeThird(this.getOptionValue('second'));
}
    
function secondChangeThird(val){
    let firstSelectValue = this.getOptionValue('first');
    changeSelect(arr[arr[arr[firstSelectValue]][val]], 'third');
}
    
function getOptionValue(id){
    let ops = document.getElementById(id).options;
    for(let i=0; i<ops.length; i++){
        if(ops[i].selected){
            return i;
        }
    }
}
    
function changeSelect(arr, id){
    document.getElementById(id).options.length = 0;
    for(let i=0; i<arr.length; i++){
        let option = new Option(arr[i], i);
        document.getElementById(id).options.add(option);
    }
}

※