js聯(lián)動下拉框菜單

xibeifneg3 2015-06-18

展開全文

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=utf-8" />
<title>test</title>
<script>
   window.onload = function(){
       var sl = new Sel('sec');

//        cascading menu first->'0',second->'0_*',third->'0_*_*'
        sl.add('0',['北京' , '天津' , '河北']);

        sl.add('0_0',['朝外街道' , '勁松街道' , '建外街道']);

        sl.add('0_0_0',['芳草地' , '吉慶里' , '吉祥里']);
        sl.add('0_0_1',['勁松北社區(qū)' , '勁松東社區(qū)' , '勁松中社區(qū)']);
        sl.add('0_0_2',['建國里' , '永安里' , '南郎家園']);

        sl.add('0_1',['河西區(qū)' , '和平區(qū)' , '河東區(qū)']);

        sl.add('0_1_0',['大營門街道' , '下瓦房街道' , '桃園街道']);
        sl.add('0_1_1',['勸業(yè)場街道' , '小白樓街道' , '體育館街道']);
        sl.add('0_1_2',['大王莊街道' , '大直沽街道' , '中山門街道']);

        sl.add('0_2',['石家莊' , '廊坊' , '唐山']);

        sl.add('0_2_0',['長安區(qū)' , '橋西區(qū)' , '新華區(qū)']);
        sl.add('0_2_1',['安次區(qū)' , '廣陽區(qū)' , '固安縣']);
        sl.add('0_2_2',['路南區(qū)' , '路北區(qū)' , '古冶區(qū)']);

       sl.init(3);
   };

   function Sel(id){
       this.oParent = document.getElementById(id);
       this.data = {};
       this.aSel = this.oParent.getElementsByTagName("select");
   }

   Sel.prototype = {

        /**
         * initialize
         * @param num ->cascading menu number
         */
       init : function(num){
           var This = this;
           for(var 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.first();
       },

        /**
         * menu data
         * @param key
         * @param value
         */
       add : function(key,value) {
           this.data[key] = value;
       },

        /**
         * the first menu data transfer
         */
       first : function(){
           var arr = this.data['0'];
           for(var i=0;i<arr.length;i++){
               var oPt = document.createElement('option');
               oPt.innerHTML = arr[i];
               this.aSel[0].appendChild(oPt);
           }
       },

        /**
         * change event
         * @param iNow ->the now index
         */
       change : function(iNow){

           var str = '0';

//            key
           for(var i=0;i<iNow;i++){
               str += '_' + (this.aSel[i].selectedIndex - 1);
           }

           if(this.data[str]){

               var arr = this.data[str];

//                delete old data
               this.aSel[iNow].options.length = 1;

//                fill new data
               for(var i=0;i<arr.length;i++){
                   var oPt = document.createElement('option');
                   oPt.innerHTML = arr[i];
                   this.aSel[iNow].appendChild(oPt);
               }

//                lower menu default select the first item
               this.aSel[iNow].options[1].selected = true;

//               recursive lower menu deault select the first item
               iNow++;
               if(iNow < this.aSel.length){
                   this.change(iNow);
               }

           }else{
//                delete old data without new data
               if(iNow < this.aSel.length){
                   this.aSel[iNow].options.length = 1;
               }
           }
       }
   };

</script>

</head>

<body>
   <div id="sec"></div>
</body>
</html>