用Jquery 1.4.4 實現的聯動下拉菜單,估計在Jquery 1.2版本以上都可用。
聯動下拉菜單是一主一從兩個select,切換主select時,從select的內容跟著改變。這裡是把從select的項目按組optgroup全部加載進來,然後切換主select時更新從select組的顯示或者隱藏。注意從select的組次序和主select項次序要一致。
Html代碼
- <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>
<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代碼
- function double_select(master, slave){
-
- var change_slave = function() {
-
- var idx = $(master).attr("selectedIndex") + 1;
-
- $(slave).children("optgroup").hide();
-
- $(slave).children("optgroup:nth-child("+idx+")").show();
-
- }
-
- $(master).change( change_slave );
-
- change_slave();
-
- }
-
- //使用
- $(function(){
- double_select("#province", "#city");
- });