Select2 Mehrfachauswahl - programmgesteuertes Abwählen/Abwählen des Elements

Question

Ich habe eine select2-Liste und eine Reihe von externen Tasten. Ich wollte auf die externen Schaltflächen klicken und die entsprechenden Elemente in der Liste select2 abwählen. Ich weiß, ich kann von einem externen Wert Artikelauswahl macht den Befehl

$("#external_btn").click(function() { 
    $("#select2").val("CA").trigger("change"); 
}); 

mit

Also, wenn ich auf dem „external_btn“ klicken, die „ca“ wird auf dem select2 ausgewählt werden.

Aber wie kann ich die Artikelauswahl umgehen? Vielen Dank.

Answer 1

Wenn Sie noch keine andere Ereignis-Listener Aktion bei der Auswahl der Option besser:

$("#select2").val("CA").attr('checked', 'checked'); // to check 
$("#select2").val("CA").removeAttr('checked'); // to un-check 

Answer 2

Es scheint keine eingebaute Funktion zu sein, um programmatisch zu deaktivieren/deaktivieren Sie eine Option aus einer Mehrfachauswahl-Select2 Steuerung. (Siehe this discussion.)

Sie können jedoch das Array der ausgewählten Werte abrufen, den Wert aus dem Array entfernen und dann das Array an das Steuerelement zurückgeben.

---

Select2 v4:

Der folgende Code funktioniert für Select2 v4. Es funktioniert auch für Select2 v3, solange das Steuerelement von einem <select>-Element und nicht von einem verborgenen Eingabeelement unterstützt wird. (Hinweis: Wenn Select2 v4 verwenden, muss die Steuerung von einem <select> Element gesichert werden.)

var $select = $('#select'); 
var idToRemove = 'c4'; 

var values = $select.val(); 
if (values) { 
    var i = values.indexOf(idToRemove); 
    if (i >= 0) { 
     values.splice(i, 1); 
     $select.val(values).change(); 
    } 
} 

JSFiddle for Select2 v4

JSFiddle for Select2 v3

---

Select2 v3:

Die folgende Code funktioniert für Select2 v3, unabhängig davon, ob Sie das Steuerelement mit einersichernElement oder ein verstecktes Eingabeelement.

var $select = $('#select'); 
var idToRemove = 'c4'; 

var values = $select.select2('val'), 
    i = values.indexOf(idToRemove); 
if (i >= 0) { 
    values.splice(i, 1); 
    $select.select2('val', values); 
} 

JSFiddle for Select2 v3, using <select> element

JSFiddle for Select2 v3, using hidden input element

Answer 3

Ich sehe alles, um ein Element nicht "zu deaktivieren". Sie können jedoch die Liste der aktuell ausgewählten Elemente abrufen, das Element entfernen und den Wert festlegen.

http://jsfiddle.net/wLNxA/

$("#e8_2").select2({ 
    placeholder: "Select a state" 
}); 

$('#removeBtn').click(function() { 
    // get the list of selected states 
    var selectedStates = $("#e8_2").select2("val"), 
     index = selectedStates.indexOf('NV'); // we're removing NV, try to find it in the selected states 
    if (index > -1) { 
     // if NV is found, remove it from the array 
     selectedStates.splice(index, 1); 
     // and set the value of the select to the rest of the selections 
     $("#e8_2").select2("val", selectedStates); 
    }; 
}); 

Answer 4

Wie Sie in Ihrer Frage angegeben haben, können Sie den Zustand des zugrunde liegenden select Elements ändern und dann eine Veränderung auslösen. Dann können Sie einfach eine Option auf die gleiche Weise abwählen wie mit einem normalen select.

eine Option von Wert "val" Unter der Annahme, würde der folgende Code es deaktivieren:

$("#select option[value=val]").prop("selected", false)  // deselect the option 
           .parent().trigger("change"); // trigger change on the select 

http://jsfiddle.net/9fD2N/3/