如何在选择框中取消选择项目？

Question

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

<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>

所以，当上面的元素呈现在页面上时，我没有办法取消选择选项。该值仍然被传递到表单中。 有什么帮助吗？

- Evik James

---

你是否可以使用jQuery？ - Ryan

是的，但不是。我不想在这个页面上使用jQuery。 - Evik James

不确定问题在哪里，但你的select应该有multiple="multiple"吧？这可能会对问题有所帮助，仅供参考。你有样例可以看到问题吗？ - Dave

Answer 1

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

- Joseph Marikle

---

读完这个后我感觉很蠢...谢谢。顺便说一下，任何需要的人也可以使用jQuery删除selected属性（如果你需要它是一个外部动作）。 - Michel Ayres

在 Mac 虚拟机中，按下 Ctrl + ⌘ 键并单击 Windows。;) - Paul George

有人能提供编程解决方案吗？ - Sami

@Sami 当然。你会发现这个问题已经在这里得到了回答和解决：(https://dev59.com/9Gcs5IYBdhLWcg3wfEHa)。 - Joseph Marikle

Answer 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;
        }
    });

- Alessandro Battistini

---

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