多选删除超过 1 个选项的问题答案

【问题标题】：Problem with multiple select removing more than 1 option多选删除超过 1 个选项的问题
【发布时间】：2011-03-02 22:24:38
【问题描述】：

Opera 浏览器的 JS 代码似乎有问题，因为它只删除了在多选标签中选择的最后一个选项标签，有人可以帮助我。

这是它的 HTML：

<select id="actions_list" name="layouts" multiple style="height: 128px; width: 300px;">
    <option value="forum">forum</option>
    <option value="collapse">collapse</option>
    <option value="[topic]">[topic]</option>
    <option value="[board]">[board]</option>
</select>

当然它在一个表单标签中，但是这个表单涉及到更多的代码，但是这里是相关的信息。

这里是应该处理这个问题的 JS，但只删除了 Opera 中最后选择的选项，不确定其他浏览器，但它确实需要删除所有选择的选项，而不仅仅是最后选择的选项...

var action_list = document.getElementById("actions_list");
var i = action_list.options.length;
while(i--)
{
    if (action_list.options[i].selected)
    {
        action_list.remove(i);
    }
}

这有什么问题？有点想不通。

谢谢

【问题讨论】：

标签： javascript html-select options multiple-select

【解决方案1】：

使用 jQuery 最容易做到这一点，但如果你想使用纯 Javascript 来做到这一点，你可以。

您遇到的问题是，当您从 Opera 的选项列表中删除一个项目时，它会取消选择所有选定的项目，因此只删除第一个项目。一种解决方法是先记住选择了哪些项目，然后再删除。

var action_list = document.getElementById("actions_list");

// Remember selected items.
var is_selected = [];
for (var i = 0; i < action_list.options.length; ++i)
{
    is_selected[i] = action_list.options[i].selected;
}

// Remove selected items.
i = action_list.options.length;
while (i--)
{
    if (is_selected[i])
    {
        action_list.remove(i);
    }
}

【讨论】：

谢谢一百万，从没想过这样做。这真是把我烦死了。为什么它们不能都一样工作... argg... 嗯，这就是多样性的荣耀。干杯 :) 顺便说一句，我对 jQuery 不是很熟悉，因为它据称很简单，但我想我只是一个老式的傻瓜，更喜欢 JS。再次感谢！ :)
这个答案已有 10 多年的历史了，但它仍然具有相关性，因为在删除第一个选项后仍然取消选择所有选项（使用 FF84 测试）。对找到它并正在处理长列表的其他人的一个简单建议：不要保存所有选项的“已选择”状态，而只保存已选择 (selected.push(i)) 的位置 (i) <select>。这使得selected 列表/数组和第二个循环更短。要从<select> 中删除该选项，请使用：action_list.remove(selected[i])。

【解决方案2】：

您可以使用jQuery 更轻松地做到这一点：

$('#actions_list option:selected').remove()

【讨论】：

我是否需要包含库才能使其工作？如果需要，我需要哪一个？
@SoLoGHoST - 如果你只下载和使用 jQuery，它就可以正常工作。
@SoLoGHoST - 您需要在代码中引用 jquery 库。您可以通过插入以下行来做到这一点：（假设“jquery-1.4.2.min.js”在您的 html 文件的目录）。您可以从我在帖子中提到的站点下载 jquery 文件：jquery.com。
好的，谢谢，我不是 jQuery 的忠实粉丝，无意冒犯，对我来说似乎有点太复杂了。我想最终会到达那里，但还没有。无论如何，谢谢。
前段时间我对 jQuery 也有同样的看法，现在我可以想象在没有这个库的情况下构建项目。不久之后，您会注意到有时使用纯 JS 会容易得多（将 10+ 行函数与 1 行 jquery 进行比较），但当然，哪种工具最适合您的项目取决于您。无论如何，你解决了这个问题很好；）

【解决方案3】：

$.each($('[name="alltags"] option:selected'), function( index, value ) {
  $(this).remove();
});

试试这个来移除多选

【讨论】：

【解决方案4】：

根据条件从选择中删除多个选项：

while(SelectBox.length > 1){
    if(SelectBox[SelectBox.length -1].text != "YourCondition"){
       SelectBox.remove(SelectBox.length -1);
    }
}

【讨论】：