jQuery联动下拉菜单

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

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

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>  
<select id="province">
  <option value="GD">广东</option>
  <option value="JS">江苏</option>
  <option value="FJ">福建</option>
</select>

<select id="city">
  <option value="">(全部)</option>
  <optgroup label="广东">
    <option value="020">广州</option>
    <option value="0755">深圳</option>
  </optgroup>
  <optgroup label="江苏">
    <option value="025">南京</option>
    <option value="0512">苏州</option>
  </optgroup>
  <optgroup label="福建">
    <option value="0591">福州</option>
    <option value="0592">厦门</option>
  </optgroup>
</select>

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. });  

相关推荐