Jquery联动下拉菜单实现代码
发布时间：2016-01-01 编辑：jiaochengji.com
本文介绍了jquery实现联动下拉菜单的一例代码，用jquery脚本实现级联下拉菜单，有需要的朋友参考下。
用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>
<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");
});
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");
});
您可能感兴趣的文章：
jQuery菜单插件 Smooth Navigational Menu
Jquery联动下拉菜单实现代码
Jquery下拉菜单(jquery 下拉菜单插件Sexy Drop Down Menu)
jquery无限层级下拉菜单实现代码
导航菜单-左则多层树形下拉菜单
基于jquery的二级联动菜单实现代码
jQuery联动下拉框 jQuery optionTree
jquery-easyui创建下拉菜单的例子
jQuery ul标签下拉菜单演示代码
7款风格新颖的jQuery/CSS3菜单导航分享
[关闭]