Jquery联动下拉菜单实现代码

发布时间:2021-01-09编辑:脚本学堂
本文介绍了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>

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"); 
});