jquery - 如何使用 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. 或者，如果被点击的元素被选中，则取消选中它。

我应该如何实现？

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