jquery Bootstrap Selectpicker aktualisiert Listen basierend auf der vorherigen Listenauswahl

Ich habe drei Dropdown-Listen, eine Liste wird beim Laden der Seite gefüllt und ändert sich nicht. Die 2. und 3. Liste können sich je nach Auswahl ändern. Diese Funktionalität funktioniert einwandfrei.

Ich habe versucht, Bootstrap Selectpicker zu den Selektoren hinzuzufügen, und ich kann sehen, dass es funktioniert – leider werden die Listen basierend auf der Auswahl nicht aktualisiert. Ich denke tatsächlich, dass sie “hinter den Kulissen” sind, da ich sehen kann, dass die Abfragen weitergeleitet werden, aber über das Frontend passiert nichts.

Teil des HTML:

<!-- SelectPicker -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.2/css/bootstrap-select.min.css" rel="stylesheet" type="text/css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>

Die ersten beiden DDLs werden über PHP erstellt, sind es aber

<select id='ddl_first_lookup' onchange="ajaxFirstOnChange(this.value)" value="" class="selectpicker"></option>
<select id='ddl_second_lookup' onchange="ajaxSecondOnChange(this.value)" class="selectpicker">
<select id="ddl_third_lookup" onchange="ajaxThirdLookup(this.value)" class="selectpicker"></select>

Ich habe folgendes Javascript:

$(document).ready(function() {  
  $(".selectpicker").selectpicker();
});

Dies ist der Punkt, an dem ich das Problem entdeckt habe. Ich versuche, dies innerhalb der Ajax-On-Change-Funktionen ohne Erfolg zu implementieren – nicht einmal sicher, ob es korrekt ist.

$('.selectpicker').selectpicker('refresh');

Ich bin ziemlich neu in all dem, also hätte ich gerne etwas Hilfe.

Ich habe Ihre Frage gefunden, nachdem ich das gleiche Problem hatte. Hinzufügen $('.selectpicker').selectpicker('refresh'); genau nach dem Hinzufügen von Artikeln zu meiner Liste hat es funktioniert.
Sie müssen also wahrscheinlich den richtigen Ort finden, an dem Sie es platzieren können. Vielleicht im Erfolgsteil Ihres Ajax-Aufrufs.

Was ich aus meiner bisherigen Erfahrung damit verstanden habe –

Wenn Sie der Dropdown-Liste dynamisch Optionen hinzufügen, müssen Sie die folgende Funktion aufrufen, bevor Sie die Option hinzufügen

$(".selectpicker").selectpicker();

Wenn Sie das Hinzufügen von Optionen abgeschlossen haben, rufen Sie die folgende Funktion auf (wenn Sie Ajax verwenden, um eine Option hinzuzufügen, setzen Sie diese Funktion in den Erfolgsteil, wie gerade Athina geantwortet hat).

$('.selectpicker').selectpicker('refresh');

Wenn Sie auf ein seltsames Problem stoßen, wie z. B. das Anzeigen von Dropdown-Daten oder das Dropdown-Menü, das manchmal nicht richtig angezeigt wird, müssen Sie definitiv einen Fehler bei der Platzierung über die Funktion und nichts anderes gemacht haben.

Wenn die Aktualisierungsmethode nicht hilft, versuchen Sie, eine Verzögerung hinzuzufügen.

    setTimeout(() => {
      jQuery('.selectpicker').selectpicker('refresh');
    }, 500);

In meinem Ajax successCallBack versuche ich, die Dropdown-Liste mit der ID als reasonCode basierend auf der dynamicId (vom Server abgerufener Wert) wie folgt zu manipulieren:

$('#reasonCode option[value="+dynamicId+"]').prop('selected', true);

aber leider hatte das nicht funktioniert, bis ich danach eine weitere Zeile wie folgt hinzugefügt habe:

$('#reasonCode').selectpicker('refresh');

Ändern des Selectpicker-Klassennamens, wenn er ausgeblendet ist:

<select name="key" class="selectpicker_oncreate">

Beim Auffrischen:

$('.selectpicker_oncreate').selectpicker('refresh');