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>
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){
3. var change_slave = function() {
5. var idx = $(master).attr("selectedIndex") + 1;
7. $(slave).children("optgroup").hide();
9. $(slave).children("optgroup:nth-child("+idx+")").show();
11. }
13. $(master).change( change_slave );
15. change_slave();
17. }
19. //使用
20. $(function(){
21. double_select("#province", "#city");
22. });