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