联动下拉菜单

联动菜单一(example)：<select  name=example  style="width=90px"  onchange="chinaredirect(this.selectedIndex)">    
                   <OPTION  selected>请选择地区</OPTION>    
               <OPTION>华北地区</OPTION>    
               <OPTION>华东地区</OPTION>  
                     <option>华南地区</option>  
                     <option>华中地区</option>  
             </select><br>    

联动菜单二(stage2)：<select  name=stage2  style="width=90px"></select><br>  

脚本，可拷贝到网页代码的任意地方：<br>  
<SCRIPT  language=JavaScript>  
     <!--    
       //初始化程序    

       //取得联动菜单一（example为联动菜单一名字）选项个数  
           var  chinagroups=document.all.item("example").options.length;  

       //动态建与联动菜单一（example）选项个数匹配的选项数组  
           var  chinagroup=new  Array(chinagroups);  

       //为每个选项组建立动态子选项对象  
               for  (i=0;  i<chinagroups;  i++)  chinagroup[i]=new  Array();  

       /*  
             下面是添加联动菜单二的选项，对应参数为以  
                 chinagroup[0][0]=new  Option("请选择地区","");  
             来说明，[0][0]，前面的[0]指与联动菜单一的第一项，后一个[0]指与  
             联动菜单一第一项对应的联动菜单二的第一项的内容，其中  
                   new  Option("请选择地区","");  
             中的"请选择地区"为显示内容，""为与该选项对应的值（value），只要  
             按照这个规律添加相应选项即可。  
       */  

       //与联动菜单一对应的第一个选项“请选择地区”对应的联动菜单二的选项  
           chinagroup[0][0]=new  Option("请选择地区","");  

       //与联动菜单一对应的第二个选项“请选择地区”对应的联动菜单二的选项  
           chinagroup[1][0]=new  Option("请选择城市","请选择城市");  
           chinagroup[1][1]=new  Option("北京","54511");  
           chinagroup[1][2]=new  Option("天津","54527");  
           chinagroup[1][3]=new  Option("石家庄","53698");  

       //与联动菜单一对应的第三个选项“请选择地区”对应的联动菜单二的选项  
             chinagroup[2][0]=new  Option("请选择城市","请选择城市");  
             chinagroup[2][1]=new  Option("北京","54511");  
             chinagroup[2][2]=new  Option("天津","54527");  

       //与联动菜单一对应的第四个选项“请选择地区”对应的联动菜单二的选项  
             chinagroup[3][0]=new  Option("请选择城市","请选择城市");  
             chinagroup[3][1]=new  Option("合肥","58321");  
             chinagroup[3][2]=new  Option("上海","58362");  

       //与联动菜单一对应的第五个选项“请选择地区”对应的联动菜单二的选项  
             chinagroup[4][0]=new  Option("请选择城市","请选择城市");  
             chinagroup[4][1]=new  Option("福州","58847");  
             chinagroup[4][2]=new  Option("南宁","59431");  
                
       //初始化结束  
                
       //改变联动菜单二的选项的函数  
           function  chinaredirect(x)  
             {    
                 //取得联动菜单二的对象（stage2为联动菜单二名字）  
               var  chinatemp=document.all.item("stage2");  

           //把联动菜单二的选项逐一置空（删除）  
                     for  (m=chinatemp.options.length-1;m>0;m--)    
                             chinatemp.options[m]=null  ;  
                        
           //采用逐一建立联动菜单二的新选项。  
                       for  (i=0;i<chinagroup[x].length;i++)  
                       chinatemp.options[i]=new  Option(chinagroup[x][i].text,chinagroup[x][i].value);  
                  
           //设置联动菜单二的第一个选项为选择项  
                       chinatemp.options[0].selected=true;  
                 }    
         //-->  
         </SCRIPT>  

文章来自: Original
引用通告: 查看所有引用 | 我要引用此文章
Tags:
相关日志: