多级联动下拉菜单(原生js)

今天上午，写了一个多级联动下拉菜单，在这里分享给大家（经过调试已经兼容ie,ff浏览器）：

  1 <!doctype html>
  2 <html lang="zh-cn">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Document</title>
  6     
  7     <style type="text/css">
  8     #cunt{ width: 200px;}
  9     #city{ width: 200px}
 10     #xian{ width:200px;}
 11 
 12 
 13 
 14 
 15 
 16 
 17 
 18     </style>
 19 
 20 <script type="text/javascript">
 21 window.onload=function(){
 22 
 23 
 24 
 25 
 26 
 27 
 28 
 29 function Createselect(id1,id2,id3,json){
 30       //数据
 31       this.cunty=json[id1];
 32       this.city=json[id2];
 33       this.xian=json[id3];
 34 
 35       //选择框
 36      this.cunbox=document.getElementById(id1);
 37      this.citbox=document.getElementById(id2);
 38      this.xiabox=document.getElementById(id3);
 39      this.ts="---请选择---";
 40 }
 41 
 42 Createselect.prototype={
 43       init:function(){
 44           this.cunbox.options[0]=new Option(this.ts);
 45           this.citbox.options[0]=new Option(this.ts);
 46           this.xiabox.options[0]=new Option(this.ts);
 47           this.createCun();
 48           this.createCity(-1);
 49           this.createXian(-1,-1);
 50       },
 51       createCun:function(){
 52               var This=this;
 53               for(var i=0;i<This.cunty.length;i++){
 54                      This.cunbox.options[i+1]=new Option(This.cunty[i],This.cunty[i]); 
 55               }
 56               This.cunbox.onchange=function(){            
 57                     This.createCity(This.cunbox.selectedIndex);  
 58                     This.createXian(-1,-1);                   
 59               }
 60 
 61       },
 62      createCity:function(num){
 63            var This=this;
 64             if(num<=0){
 65                 This.citbox.length=1;
 66                 This.citbox.disabled=true; 
 67                 This.citbox.options[0]=new Option(This.ts)
 68             }else{
 69                 This.citbox.length=1;
 70                 This.citbox.disabled=false; 
 71                 var cit=This.cunty[num-1];
 72                 var arr=This.city[cit];
 73                 for(var i=0;i<arr.length;i++){
 74                    This.citbox.options[i+1]=new Option(arr[i],arr[i]);
 75                 }
 76 
 77             }
 78             This.citbox.onchange=function(){            
 79                     This.createXian(num,This.citbox.selectedIndex);   
 80             }
 81 
 82         },
 83         createXian:function(snum,xin){
 84                 var This=this;
 85                 if(snum<=0||xin<=0){
 86                     This.xiabox.length=1;
 87                     This.xiabox.disabled=true; 
 88                     This.xiabox.options[0]=new Option(This.ts)
 89                     return;
 90                 }else{
 91                     This.xiabox.length=1;
 92                     This.xiabox.disabled=false; 
 93                     var qnum=snum-1;
 94                     var sxin=xin-1;
 95                     var cit=This.city[This.cunty[qnum]][sxin];
 96                     var arr=This.xian[qnum][cit];                
 97                     for(var i=0;i<arr.length;i++){
 98                        This.xiabox.options[i+1]=new Option(arr[i],arr[i]);
 99                     }
100                 }
101                 //获取值
102                 This.xiabox.onchange=function(){                             
103                     alert(This.getValue());
104                }
105 
106          },
107          getValue:function(){
108               var This=this;
109               var val=This.cunbox.value+","+This.citbox.value+","+This.xiabox.value;
110               return val;
111          }
112 
113 
114 
115 }
116 
117 
118 
119 /*
120 
121   数据一共分为3级并且每一级的数据要一一对应，每一级的数据名字于对应id名字相同。
122 
123 
124 */
125 
126 var json={
127                cunt:["北京","上海"],//第一级
128 
129                city :{              //第二级
130 
131                     "北京":["海淀","延庆","朝阳","丰台"],
132                     "上海":["浦东","浦西","虹口","外滩"]
133                },
134 
135                xian:[                //第三级
136                 
137                     {
138                       "海淀":["海淀上","海淀下","海淀中"],
139                       "延庆":["延庆上","延庆下","延庆中","延庆下下","延庆中中"],
140                       "朝阳":["朝阳上","朝阳下","朝阳中"],
141                       "丰台":["丰台上","丰台下","丰台中","丰台中中"]
142               
143                     },
144                     {
145                       "浦东":["浦东上","浦东下","浦东中"],
146                       "浦西":["浦西上","浦西下","浦西中"],
147                       "虹口":["虹口上","虹口下","虹口中","虹口上上","虹口下下","虹口中中"],
148                       "外滩":["外滩上","外滩下","外滩中"]
149                     }
150 
151 
152               ]
153     };
154 
155 var cres=new Createselect("cunt","city","xian",json);
156 cres.init();
157 
158 }
159    </script>
160 
161 </head>
162 <body>
163 
164 
165 <select id="cunt"></select>
166 <select id="city"></select>
167 <select id="xian"></select>    
168     
169 </body>
170 </html>

 

 

posted @ 2013-11-26 15:00  梦飞无颜  阅读(2106)  评论(0)  编辑  收藏  举报