Wie kann die Auswahl einer Option in einer Mehrfachauswahl mit jQuery umgeschaltet werden?

Question

Ich habe ein Standard select multiple HTML Eingabefeld, zum Beispiel:

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

Da es sich um einen Multi-Select, mehr als einen Wert, den Sie die CTRL Taste und wählen Sie weitere Elemente zu halten, hat zu wählen. Doch das, was ich erreichen will ist, dass:

1. eine nicht ausgewählte Option anklicken, wählt es
2. Durch Klicken auf eine ausgewählte Option Auswahl entfernen.

Die Idee ist, um zu vermeiden, die CTRL-Taste drücken und die Nutzungs Semantik dieses Eingabefeldes ändern. Elemente sollten nur durch Anklicken selektierbar und nicht auswählbar sein (dh Umschalten des Select-Status).

Ich konnte dies noch nicht implementieren. Der Pseudocode sollte ungefähr so ​​aussehen.

1. Erfassen Sie ein Click-Ereignis.
2. Überprüfen Sie, ob das Element, auf das geklickt wurde, nicht ausgewählt wurde, und wählen Sie es
3. Oder wenn das Element, das geklickt wurde, ausgewählt wurde, heben Sie die Auswahl auf.

Wie soll ich das umsetzen?

Answer 1

Sie können die folgenden Ausschnitt verwenden Sie den gewünschten Effekt

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

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

    return false; 
}); 

In älteren Versionen von jQuery zu erreichen, wo prop() nicht verfügbar war:

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

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

    return false; 
}); 

Answer 2

Sie haben Recht, wenn Sie das Standardverhalten von mehreren Eingabefeldern ändern möchten. Sie neigen dazu, einen negativen Beitrag zur Benutzererfahrung zu leisten, da der Zweck nicht klar vermittelt wird und die Benutzer möglicherweise nicht verstehen, wie sie richtig verwendet werden.

Auch die Neueinstellung einer Mehrfachauswahlbox ist nicht richtig. Wenn Sie erwägen, mehrere auszuwählen, möchten Sie vielleicht Ihr Design umgestalten. Vielleicht können Sie stattdessen Checkboxen verwenden?

Hier ist ein Artikel zum Thema: http://www.ryancramer.com/journal/entries/select_multiple/

Answer 3

Wahrscheinlich einige Fix kommen mit den neuen jQuery-Versionen:

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

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

Answer 4

Eine andere Variante ohne 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

mit jQuery 1.9.1 der Javascript-Code ist:

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

Answer 6

ich diese Lösung gerade versucht, und die gewählte Antwort für JQuery 1.9 hat nicht funktioniert.1

Die Antwort von Oscar sah viel besser, aber es gemischte Eigenschaften mit Attributen und funktioniert nicht, wenn Sie wählen, Abwahl dann versuchen Sie es erneut zu wählen, wie es die Auswahl in einen unbrauchbaren Zustand versetzt

ich gefunden habe, die richtige Antwort war für mich das folgende

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

ich hoffe, das hilft anderen;)

Answer 7

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

Ich sehe die meisten der oben genannten Antworten sind das Ereignis mit der Option, anstelle der Auswahl verbindlich. Wenn meine Auswahl 1000 Optionen hat, werden 1000 Ereignisse gebunden. Beeinflusst dies die Leistung?

Aus diesem Grunde ich entscheiden, auch nicht meinen Fall in der Option zu binden.