JavaScript实现ListBox多选项目批量删除的方法

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();