如何使用 jQuery 在多选中切换选项的选择？

Question

我有一个标准的 select multiple HTML 输入字段，例如：

 <select multiple="multiple" size="5" id="mysel" name="countries">
    <option value="2">Afghanistan</option>
    <option value="4">Aland</option>
</select>

由于这是多项选择，要选择多个值，您必须按住 CTRL 键并选择任何其他元素。但是我想要实现的是：

1. 单击一个未选择的选项选择它
2. 单击一个已选择的选项取消选择它。

这个想法是为了避免必须按下 CTRL 键并更改此输入字段的使用语义。元素只能通过单击来选择和取消选择（即切换选择状态）。

我还没有能够实现这一点。伪代码应该看起来像这样。

1. 捕捉点击事件。
2. 检查被点击的元素是否未被选中，然后选择它
3. 或者，如果单击的元素已被选中，则取消选中它。

我应该如何实施？

原文由 tim 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以使用以下代码片段来达到您想要的效果

$("select[multiple] option").mousedown(function(){
   var $self = $(this);

   if ($self.prop("selected"))
          $self.prop("selected", false);
   else
       $self.prop("selected", true);

   return false;
});

在旧版本的 jQuery 中， prop() 不可用：

 $("select[multiple] option").mousedown(function(){
   var $self = $(this);

   if ($self.attr("selected"))
          $self.attr("selected", "");
   else
       $self.attr("selected", "selected");

   return false;
});

原文由 Tim Banks 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

我刚刚尝试了这个解决方案，所选答案不适用于 Jquery 1.9.1

Oscar 的答案看起来好多了，但是它混合了属性和属性，如果您选择，取消选择然后尝试再次选择它不起作用，因为它会将选择置于不可用状态

我发现对我来说正确的答案如下

$("select[multiple] option").mousedown(function () {
       if ($(this).prop("selected"))
           $(this).prop("selected", false);
       else
           $(this).prop("selected", true);
       return false;    });

我希望这对其他人有帮助；）

原文由 duindain 发布，翻译遵循 CC BY-SA 3.0 许可协议