当我尝试清空选择选项时:
id“mClick”被选中,id的“sClick”,“cClick”和“srClick”将被清空。
id“sClick”被选中,id的“cClick”和“srClick”将被清空。
id“cClick”被选中,id“srClick”将被清空。
<form action="javascript:void(0);" method="POST" id="lForm"> <table> <tr> <td> <select name="module" id="mClick"> <option value="">Select Mod</option> <option value="1">Mod 1</option> <option value="2">Mod 2</option> <option value="3">Mod 3</option> </select> </td> <td> <select name="state" id="sClick"> <option value="">Select State</option> <option value="1">State 1</option> <option value="2">State 2</option> </select> </td> <td> <select name="city" id="cClick"> <option value="">Select City</option> <option value="1">City 1</option> <option value="2">City 2</option> </select> </td> <td> <select name="services" id="srClick"> <option value="">Select Services</option> <option value="1">Services 1</option> <option value="2">Services 2</option> </select> </td> </tr> </table>
在场景3中,我使用这个功能,但除了最后一个选择之外它全部删除。任何想法我失踪了什么?谢谢
$('#lForm select[id!="mClick"] select[id!="sClick"] select[id!="cClick"] option[value!=""]').remove().end();
解决方法
以您所描述的方式清除选项的最简单方法是使用options.length = 1。此外,您可以利用每个下拉列表清除逻辑上跟随它的事实,因此您只需要声明一个单变更处理程序。
$('#lForm select').on('change',function() { if (this.selectedIndex > 0) { var $others = $(this).closest('table').find('select'),current = $others.index(this); // find current while (++current < $others.length) { // for each following drop down $others.get(current).options.length = 1; } } });
我不知道你怎么打算重新填充下来虽然:)