Jquery联动下拉菜单方法1

联动下拉菜单是一主一从两个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. });