jQuery联动下拉菜单
用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");
- });
相关推荐
IT之家 2020-03-11
graseed 2020-10-28
zbkyumlei 2020-10-12
SXIAOYI 2020-09-16
jinhao 2020-09-07
impress 2020-08-26
liuqipao 2020-07-07
淡风wisdon大大 2020-06-06
yoohsummer 2020-06-01
chenjia00 2020-05-29
baike 2020-05-19
扭来不叫牛奶 2020-05-08
hxmilyy 2020-05-11
黎豆子 2020-05-07
xiongweiwei00 2020-04-29
Cypress 2020-04-25
冰蝶 2020-04-20