首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

Jquery联动上拉菜单

2012-09-27 
Jquery联动下拉菜单用Jquery 1.4.4 实现的联动下拉菜单,估计在Jquery 1.2版本以上都可用。联动下拉菜单是一

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");});
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; 2 楼 ryan.liu 2011-11-09   在Firefox下面OK,在IE下面有问题

热点排行