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

Question

我有一个标准的select multipleHTML输入字段,例如:

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

由于这是一个多选项,要选择多个值,您必须按住CTRL键并选择任何其他元素.但是,我想要实现的目标是:

1. 单击UNSELECTED选项选择它
2. 单击SELECTED选项UNSELECTS它.

我们的想法是避免必须按下CTRL键并更改此输入字段的使用语义.元素应该只能通过单击(即切换选择状态)来选择和取消选择.

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

1. 抓住Click事件.
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;
});