用jquery 1.4.4 实现的联动下拉菜单,估计在Jquery 1.2版本以上都可用。
联动下拉菜单是一主一从两个select,切换主select时,从select的内容跟着改变。
把从select的项目按组optgroup全部加载进来,然后切换主select时更新从select组的显示或者隐藏。
注意,从select的组次序和主select项次序要一致。
1,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>
2,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");
});