select 多級聯動

地區:<select id="drpProvince"></select> - <select id="drpCity"></select> - <select id="drpArea"></select>
<script type="text/javascript">
    //聯動select數組
    var arrSelect = new Array(document.getElementById("drpProvince"), document.getElementById("drpCity"), document.getElementById("drpArea"));
    //多圍數組數據,四圍分別保存id、父級id、顯示文本、文本值
    var arrData = new Array(
        <!--[999999,0,'--請選擇--',''],[999998,999999,'--請選擇--',''],[999997,999998,'--請選擇--',''],-->
        [1,0,'北京','1'],[2,1,'北京','2']
        ,[3,0,'湖南','3'],[4,3,'長沙','4'],[5,3,'株洲','5'],[6,3,'湘潭','6'],[7,6,'嶽塘區','7'],[8,6,'雨湖區','8'],[9,6,'河塘區','9']
        ,[10,0,'廣東','10'],[11,10,'廣州','11'],[12,10,'佛山','12'],[13,11,'天河區','13'],[14,11,'番禺區','14'],[15,11,'越秀區','15'],[16,12,'南山區','16'],[17,12,'蟬城區','17']
    );
    //默認值數組
    var arrDefault = new Array('10' ,'11' ,'13');
    //初始化主函數
    function arrInit(strInitID, arrSelect, arrMatrix, arrDefValue) {
        function doChange(iIndex) {
            var iCount = 0;
            var sParentID = strInitID;
            if (iIndex > 0) sParentID = arrSelect[iIndex - 1].options[arrSelect[iIndex - 1].selectedIndex].ID;
            with (arrSelect[iIndex]) {
                length = 0;
                options[iCount++] = new Option('--所有--', '0', false, true);
                for (var i = 0; i < arrMatrix.length; i++) {
                    if (String(arrMatrix[i][1]) == String(sParentID)) {
                        var oNewOption = new Option(arrMatrix[i][2], arrMatrix[i][3], false, false);
                        oNewOption.ID = arrMatrix[i][0];
                        options[iCount++] = oNewOption;
                        if(arrMatrix[i][3] == arrDefValue[iIndex])options[iCount - 1].selected = true;
                    };
                };
                /* if (iCount == 0) { //列表數爲0則新增默認項
                    var oNull = new Option("--", null, false, true);
                    oNull.ID = "_0x" + (new Date()).getTime();
                    options[0] = oNull;
                };*/
                
                //聯動改變所有子select
                if (++iIndex < arrSelect.length) doChange(iIndex);
            };
        };
        if (!arrDefValue) arrDefValue = [];
        for (var i = 0; i < arrSelect.length - 1; i++) {
            eval("arrSelect[" + i + "].onchange = function(){ doChange(" + (i + 1) + "); };");
        }
        doChange(0);
        //只有第一次調用初始化主函數arrInit才使用默認值,之後手動選擇不受默認值限制,因此清空。
        arrDefValue = [];
    };
    arrInit(0,arrSelect,arrData,arrDefault);
</script>
 
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章