js联动下拉框菜单

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',['劲松北社区' , '劲松东社区' , '劲松中社区']);
        sl.add('0_0_2',['建国里' , '永安里' , '南郎家园']);

        sl.add('0_1',['河西区' , '和平区' , '河东区']);

        sl.add('0_1_0',['大营门街道' , '下瓦房街道' , '桃园街道']);
        sl.add('0_1_1',['劝业场街道' , '小白楼街道' , '体育馆街道']);
        sl.add('0_1_2',['大王庄街道' , '大直沽街道' , '中山门街道']);

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

        sl.add('0_2_0',['长安区' , '桥西区' , '新华区']);
        sl.add('0_2_1',['安次区' , '广阳区' , '固安县']);
        sl.add('0_2_2',['路南区' , '路北区' , '古冶区']);

       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>