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