如何取消选择选择框中的项目？答案

【问题标题】：How to unselect an item in a select box?如何取消选择选择框中的项目？
【发布时间】：2023-04-06 00:07:01
【问题描述】：

今天我有一个简单的问题要问你。我有一个选择框，使用户可以选择多个项目。此外，当用户返回页面时，他可以看到他选择了哪些项目，并在必要时取消选择它们。问题是当我尝试取消选择时，选择只是变成灰色；它不会取消选择。

<select name="MySelect" multiple>
<option value="1">1</option>
<option value="2">2</option>
<option value="3" selected="selected">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>

因此，当上面的元素呈现到页面时，我无法取消选择该选项。该值仍在传递给表单。

有什么帮助吗？

【问题讨论】：

您可以选择使用 jQuery 吗？
是的，但不是。我不想在这个页面上使用 jQuery。
不确定是什么问题，但您的选择不应该有多个=“多重”吗？这可能会或可能不会导致问题，只是教 id 突出显示它。你有我们可以看到问题的样本吗？

标签： html select

【解决方案1】：

您可以通过按住 ctrl 键来取消选择多值选择列表中的选项。

【讨论】：

读完后我觉得自己很笨……谢谢。顺便说一句，对于任何寻找它的人。您可以使用 jQuery 删除 prop selected（如果您需要它作为外部操作）
Ctrl + ⌘-单击 Mac VM 中的 Windows ;)
可以提供程序化解决方案吗？
@Sami 当然。你会发现那个问题一直是asked and answered here。

【解决方案2】：

您可以使用 JS 对象来记住一行的状态并单击选择时的操作（JQuery）。

$('#yourselect').click( function(e){        
        var i = this.selectedIndex;
        if(this.options[i].selectedOld==true){
            this.options[i].selected = false;
            this.options[i].selectedOld = false;
        }
        else{
            this.options[i].selectedOld = true;
        }
    });

【讨论】：

有时我们需要使用单选字段来防止多选，但我们也需要取消选择一个选项。此解决方案支持此工作流程。