聯動下拉菜單

<div id="div1"></div>

    window.onload = function () {
        var s1 = new Sel('div1');
        s1.add('0',['中國','美國','日本'])
        s1.add('0_0',['深圳','廣州','北京'])
                 s1.add('0_0_0',['寶安','南山','福田'])
                 s1.add('0_0_1',['天河','越秀','海珠'])
                 s1.add('0_0_2',['西城','東誠','崇文'])
        s1.add('0_1',['波士顿','芝加哥','休斯敦'])
                s1.add('0_1_0',['子波士1','子波士2','子波士3'])
                s1.add('0_1_1',['子芝加1','子芝加2','子芝加3'])
                s1.add('0_1_2',['子休斯1','子休斯2','子休斯3'])
        s1.add('0_2',['東京','横滨','大阪'])
                s1.add('0_2_0',['子東京1','子東京2','子東京3'])
                s1.add('0_2_1',['子横滨1','子横滨2','子横滨3'])
                s1.add('0_2_2',['子大阪1','子大阪2','子大阪3'])
        s1.init(3);

    }
//寫構造函數
    function Sel(id) {
        this.oParent = document.getElementById(id);  //ID變成對象的屬性；
        this.data = {} //寫對象存函數 key = value
        this.aSel = this.oParent.getElementsByTagName('select'); //創建全局屬性，獲取所有select才能找到 獲得第一個select aSel[0]
    }
//寫原型
    Sel.prototype = {
//初始化
        init: function (num) {
            var This = this; //原型對像
            for (i = 1; i <= num; i++) {
                var oSel = document.createElement('select');
                var oPt = document.createElement('option');
                oPt.innerHTML = '默認';
                oSel.appendChild(oPt);
                oSel.index = i;
                this.oParent.appendChild(oSel)
                oSel.onchange = function () {
                    This.change(this.index) //this改變指向  this是下拉菜單，This對象
                }
            }
            this.first();
        },
        add: function (key, value) {
            this.data[key] = value;
        },
        first: function () {
            var arr = this.data['0'];//得到key 比如 s1.add('0',['中國','美國','日本'])  this.date['0'];得到['中國','美國','日本']
            for (var i = 0; i < arr.length; i++) {
                var oPt = document.createElement('option');
                oPt.innerHTML = arr[i] // ['中國','美國','日本']
                this.aSel[0].appendChild(oPt)
            }
        },
        //開始做第一個onchange下拉事件。
        change: function (iNow) { //iNow 當前下拉菜單的索引 0 1 2 3 
            var str = '0';
            for(var i = 0;i<iNow;i++){
                str += '_'+ (this.aSel[i].selectedIndex - 1);
                //s1.add('0',['中國','美國','日本']) 因為前面還有個默認，select裏一共有四個值，選擇1的索引值是1 但所對應的應該是 s1.add('0_0',['深圳','廣州','北京'])中的0_0,要開成這個形式必須 - 1
            }
            if( this.data[str] ){ //0_0 0_1 0_2
                var arr = this.data[str] //對應第二項數組['深圳','廣州','北京'] ['波士顿','芝加哥','休斯敦']['東京','横滨','大阪']
                this.aSel[iNow].options.length = 1; //只保留‘默認’這一項option
                for( var i = 0;i<arr.length;i++){
                    var oPt = document.createElement('option');
                    oPt.innerHTML = arr[i];
                    this.aSel[iNow].appendChild(oPt);
                }
                this.aSel[iNow].options[1].selected = true //選第一項時第二項自動變直接選中
                iNow++;  //遞歸，連動三個
                if(iNow < this.aSel.length){
                    this.change(iNow)
                }
            }
            else{//選擇默認時走else
                if(iNow < this.aSel.length)//小於下位菜單的長度；
                this.aSel[iNow].options.length = 1; //選擇默認時變回來
            }
        }
    }

運行