Ändern der Auswahl in einer Auswahl mit dem ausgewählten Plugin

105

Ich versuche, die aktuell ausgewählte Option in einer Auswahl mit dem ausgewählten Plugin zu ändern.

Die Dokumentation behandelt das Aktualisieren der Liste und das Auslösen eines Ereignisses, wenn eine Option ausgewählt ist, aber nichts (was ich sehen kann) beim externen Ändern des aktuell ausgewählten Werts.

Ich habe eine jsFiddle erstellt, um den Code und meine Versuche, die Auswahl zu ändern, zu demonstrieren :

$('button').click(function() {
    $('select').val(2);
    $('select').chosen().val(2);
    $('select').chosen().select(2);
});

— gak
quelle

Ich konnte die von Ihnen bereitgestellte jsfiddle-Demonstration nicht ausführen. Könnten Sie es bitte aktualisieren?

— Glücklicher

In Ordnung. Der Grund, warum ich Ihre Demonstration nicht ausführen konnte, war, dass die ausgewählte Bibliothek auf eine falsche URL zeigte. Hier ist die aktualisierte jsfiddle

— Lucky

214

Aus dem Abschnitt "Dynamisch aktualisieren" in den Dokumenten : Sie müssen das Ereignis "Ausgewählt: Aktualisiert" im Feld auslösen

$(document).ready(function() {

    $('select').chosen();

    $('button').click(function() {
        $('select').val(2);
        $('select').trigger("chosen:updated");
    });

});

HINWEIS: In Versionen vor 1.0 wurde Folgendes verwendet:

$('select').trigger("liszt:updated");

— Lucas Welper
quelle

6

Zu chosen:updatedliszt:updated

— Ihrer Information

Ich bin hier gestolpert, als ich versucht habe, eine Möglichkeit zu finden, die derzeit am besten passende Option aus einer mehrfach ausgewählten Suchergebnisliste auszuwählen (wenn der Fokus verloren ging). Hier ist eine kurze Geige über meine Erkundungen. Sie müssen keine Ereignisse auslösen. Vielleicht ist es auch für jemand anderen von Nutzen ... :)

— Timo

Trotzdem funktioniert der obige Code nur einmal. Ich meine, wenn ich erneut auf das Menü klicke, in dem das ausgewählte Plugin angehängt ist, wird nicht der Wert innerhalb von val () verwendet. Warum dies passieren könnte

— Dimitris Papageorgiou

9

Ich weiß, dass dies ein alter Beitrag ist - aber eine einfachere Möglichkeit zum Aktualisieren besteht nur in einer Zeichenfolge: $('select').val(2).trigger("chosen:updated");

— Andrew Newby

10

@Lucas Welper: Sie sollten auch ändern $('select').val(2);in $('select').val(2).change();, weil die Änderung der gewählten Option eines select mit jQuery nicht das Änderungsereignis auslösen und einige Leute könnten es brauchen.

— Machineaddict

41

Meine Antwort ist spät, aber ich möchte einige Informationen hinzufügen, die in allen obigen Antworten fehlen.

1) Wenn Sie einen einzelnen Wert in der ausgewählten Auswahl auswählen möchten.

$('#select-id').val("22").trigger('chosen:updated');

2) Wenn Sie eine mehrfach ausgewählte Auswahl verwenden, müssen Sie möglicherweise mehrere Werte gleichzeitig festlegen.

$('#documents').val(["22", "25", "27"]).trigger('chosen:updated');

Informationen, die über folgende Links gesammelt wurden:
1) Ausgewählte Dokumente
2) Ausgewählte Github-Diskussion

— Aamir
quelle

Unter Hinweis darauf, dass "22", "25" usw. die Werte sind, nicht der innere HTML-Code, zum Beispiel <option value = "25"> Sometext </ option>

— Fadi Bakoura

2

Manchmal müssen Sie die aktuellen Optionen entfernen, um die ausgewählten Optionen zu bearbeiten.

Hier ist ein Beispiel zum Festlegen von Optionen:

<select id="mySelectId" class="chosen-select" multiple="multiple">
  <option value=""></option>
  <option value="Argentina">Argentina</option>
  <option value="Germany">Germany</option>
  <option value="Greece">Greece</option>
  <option value="Japan">Japan</option>
  <option value="Thailand">Thailand</option>
</select>

<script>
activateChosen($('body'));
selectChosenOptions($('#mySelectId'), ['Argentina', 'Germany']);

function activateChosen($container, param) {
    param = param || {};
    $container.find('.chosen-select:visible').chosen(param);
    $container.find('.chosen-select').trigger("chosen:updated");
}

function selectChosenOptions($select, values) {
    $select.val(null);                                  //delete current options
    $select.val(values);                                //add new options
    $select.trigger('chosen:updated');
}
</script>

JSFiddle (einschließlich Anhängen von Optionen): https://jsfiddle.net/59x3m6op/1/

— Zu groß.
quelle

1

Um Konto für den Fall, dass die Auswahl keinen Wert hat noch Updates var selected = mySelect.val();zu var selected = mySelect.val() || [];statt.

— ElliotSchmelliot

0

Bei mehreren Auswahltypen und / oder wenn Sie bereits ausgewählte Elemente einzeln direkt in einer Dropdown-Liste entfernen möchten, können Sie Folgendes verwenden:

jQuery("body").on("click", ".result-selected", function() {
    var locID = jQuery(this).attr('class').split('__').pop();
    // I have a class name: class="result-selected locvalue__209"
    var arrayCurrent = jQuery('#searchlocation').val();
    var index = arrayCurrent.indexOf(locID);
    if (index > -1) {
        arrayCurrent.splice(index, 1);
    }
    jQuery('#searchlocation').val(arrayCurrent).trigger('chosen:updated');
});

— SlavisaPetkovic
quelle