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 键并选择任何其他元素。但是，我想要实现的目标是：

单击UNSELECTED选项选择它
单击SELECTED选项取消它。

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

我还没有实现这个。伪代码看起来应该是这样的。

抓住Click事件。
检查单击的元素是否未被选中，然后选择它
或者，如果选中了单击的元素，则取消选中它。

我该如何实现？

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

Answer 2

您想要更改选择多个输入字段的默认行为是正确的。他们倾向于对用户体验做出负面贡献，因为目的没有明确传达，用户可能无法理解如何正确使用它们。

重新定位多选框也不对。如果您正在考虑使用选择倍数，那么您可能想要重构您的设计。也许您可以使用复选框？

以下是关于该主题的文章：http://www.ryancramer.com/journal/entries/select_multiple/

Answer 3

我刚试过这个解决方案，所选答案对Jquery 1.9.1

不起作用

奥斯卡的答案看起来好多了，但它将属性与属性混合在一起，如果你选择，取消选择然后尝试再次选择，因为它将选择放入不可用状态

我找到了正确的答案是以下

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

我希望这有助于其他人;）

Answer 4

没有JQuery的另一种变体：

var multiSelect = {};

function init() {      
  var s = document.getElementsByTagName('select');
  for (var i = 0; i < s.length; i++) {
    if (s[i].multiple) {
      var n = s[i].name;
      multiSelect[n] = [];
      for (var j = 0; j < s[i].options.length; j++) {
        multiSelect[n][j] = s[i].options[j].selected;
      }
      s[i].onclick = changeMultiSelect;
    }
  }
}

function changeMultiSelect() {
  var n = this.name;
  for (var i=0; i < this.options.length; i++) {
    if (this.options[i].selected) {
      multiSelect[n][i] = !multiSelect[n][i];
    }
    this.options[i].selected = multiSelect[n][i];
  }
}

window.onload = init;

Answer 5

新的jQuery版本可能会有一些修复：

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

    if ($self.attr("selected")){
        $self.removeAttr("selected");
    } else {
        $self.attr("selected", "selected");
    }
    return false;
});

Answer 6

Javascript（没有jquery）：

var select = document.getElementById('mysel');
select.addEventListener('mousedown', function(e){
    var opt = e.target;
    if (opt.selected){
        opt.removeAttribute('selected');
        opt.selected = false;
    } else {
        opt.setAttribute('selected', '');
        opt.selected = true;
    }
    e.preventDefault();
});

我看到上面的大多数答案都是使用选项而不是select来绑定事件。如果我的选择有1000个选项，那么它将绑定1000个事件，它会影响性能吗？

因此，我还决定不在选项中绑定我的事件。

Answer 7

使用jquery 1.9.1，javascript代码为：

   $("select[multiple] option").mousedown(function () {
       var $self = $(this);
       if ($self.prop("selected"))
           $self.removeAttr("selected");
       else
           $self.attr("selected", "selected");
       return false;
   });

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

7 个答案: