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>

 

 

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

评论

2 楼 ryan.liu 2011-11-09  

在Firefox下面OK，在IE下面有问题

1 楼 ryan.liu 2011-11-09  

在最新的JQuery 1.7 中，
var idx = $(master).attr("selectedIndex") + 1;
改为
var idx = $(master).prop("selectedIndex") + 1;
或者象本例子中最上面有(全部)非optgroup，应该是
var idx = $(master).prop("selectedIndex") + 2;