Как переключить выбор опции в множественном выборе с помощью 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. Поймать событие 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;
});

Answer 2

Я только что попробовал это решение, и выбранный ответ не работал для 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 3

Вы правы, желая изменить поведение по умолчанию для выбора нескольких полей ввода. Они, как правило, негативно влияют на пользовательский опыт, поскольку цель не совсем понятна, и пользователи могут не понимать, как правильно их использовать.

Переназначение поля множественного выбора тоже не правильно. Если вы рассматриваете возможность использования множественного выбора, то вы можете реорганизовать свой дизайн. Возможно, вы можете использовать вместо этого флажки?

Вот статья по теме: http://www.ryancramer.com/journal/entries/select_multiple/

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

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

Я вижу, что большинство ответов выше связывают событие с опцией вместо выбора.Если мой выбор имеет 1000 опций, то он свяжет 1000 событий, повлияет ли это на производительность?

Из-за этого я также решил не связывать свое событие в опции.

Answer 6

Возможно, какое-то исправление выйдет с новыми версиями jQuery:

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

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

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