本文介绍如何在JavaScript中从ListBox同时删除多个选中项目。由于正向删除会导致索引变化,需采用从下至上遍历的方式。提供了原生JS通过options.length逆序遍历及selected属性判断的实现代码,并对比展示了使用jQuery一行代码完成删除的简洁方案。
JavaScript实现ListBox多选项目批量删除的方法
要从列表框中同时删除多个项目,不能采用从上到下的顺序进行删除。这是因为每删除一个项目,后续项目的索引号都会发生动态变化,从而导致错误。正确的做法是从下向上进行删除,这样可以避免索引号混乱的问题。
HTML代码部分
具体实现如下:
<table>
<tr>
<td align="center">
<select id="lsbox" name="lsbox" size="10" multiple>
<option value="1">India</option>
<option value="2">United States</option>
<option value="3">China</option>
<option value="4">Italy</option>
<option value="5">Germany</option>
<option value="6">Canada</option>
<option value="7">France</option>
<option value="8">United Kingdom</option>
</select>
</td>
</tr>
<tr>
<td align="center">
<button onclick="listbox_remove('lsbox');">Delete</button>
<button onclick="window.location.reload();">Reset</button>
</td>
</tr>
</table> 对应的JavaScript代码如下:
具体实现如下:
function listbox_remove(sourceID) {
//从ID获取列表框对象。
var src = document.getElementById(sourceID);
//遍历列表框中的每个选项
for(var count= src.options.length-1; count >= 0; count--) {
//如果选项被选中,则删除该选项
if(src.options[count].selected == true) {
try {
src.remove(count, null);
} catch(error) {
src.remove(count);
}
}
}
} 当然,如果使用jQuery来删除,那就方便了,一句话就搞定了
具体实现如下:
$("#sourceId").find('option:selected').remove();