Jquery联动下拉菜单

用Jquery 1.4.4 实现的联动下拉菜单，估计在Jquery 1.2版本以上都可用。

联动下拉菜单是一主一从两个select，切换主select时，从select的内容跟着改变。这里是把从select的项目按组optgroup全部加载进来，然后切换主select时更新从select组的显示或者隐藏。注意从select的组次序和主select项次序要一致。

 

   HTML代码

 

Html代码  

1. <select id="province">  
2.   <option value="GD">广东</option>  
3.   <option value="JS">江苏</option>  
4.   <option value="FJ">福建</option>  
5. </select>  
6.   
7. <select id="city">  
8.   <option value="">（全部）</option>  
9.   <optgroup label="广东">  
10.     <option value="020">广州</option>  
11.     <option value="0755">深圳</option>  
12.   </optgroup>  
13.   <optgroup label="江苏">  
14.     <option value="025">南京</option>  
15.     <option value="0512">苏州</option>  
16.   </optgroup>  
17.   <optgroup label="福建">  
18.     <option value="0591">福州</option>  
19.     <option value="0592">厦门</option>  
20.   </optgroup>  
21. </select>  

 

 

   JS代码

Js代码  

1. function double_select(master, slave){  
2.   
3.     var change_slave = function() {  
4.   
5.         var idx = $(master).attr("selectedIndex") + 1;  
6.   
7.         $(slave).children("optgroup").hide();  
8.   
9.         $(slave).children("optgroup:nth-child("+idx+")").show();  
10.   
11.     }  
12.   
13.     $(master).change( change_slave );  
14.   
15.     change_slave();  
16.   
17. }  
18.   
19. //使用  
20. $(function(){  
21.     double_select("#province", "#city");  
22. });