webentwicklung-frage-antwort-db.com.de

jquery bootstrap selectpicker aktualisiert Listen basierend auf der vorherigen Listenauswahl

Ich habe drei Dropdown-Listen, eine Liste wird beim Laden der Seite aufgefü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 aufgrund der Auswahl nicht aktualisiert. Ich denke eigentlich "hinter den Kulissen" sie sind so, wie ich die Abfragen sehen kann, aber über das Frontend passiert nichts.

Teil des HTML:

<!-- SelectPicker -->
<link href='//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 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, dieses Problem innerhalb der Ajax-On-Change-Funktionen ohne Erfolg zu implementieren - nicht einmal, ob es richtig ist.

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

Ich bin ziemlich neu bei all dem, daher hätte ich gerne etwas Hilfe.

27
n34_panda

Ich habe Ihre Frage nach dem gleichen Problem gefunden. Das Hinzufügen von $('.selectpicker').selectpicker('refresh'); genau nach dem Hinzufügen von Elementen zu meiner Liste hat die Aufgabe erfüllt.
Sie müssen also wahrscheinlich den richtigen Platz finden, um es zu platzieren. Vielleicht im Erfolgsteil Ihres Ajax-Anrufs.

53
Athina

Was ich bisher aus meiner Erfahrung verstanden habe -

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

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

Wenn Sie mit dem Hinzufügen von Optionen fertig sind, rufen Sie die folgende Funktion auf (wenn Sie ajax verwenden, um eine Option hinzuzufügen, setzen Sie diese Funktion in den Erfolgsteil, so wie er gerade beantwortet wurde.)

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

Wenn Sie mit einem seltsamen Problem konfrontiert sind, z. B. das Anzeigen von Dropdown-Daten und nicht das Anzeigen von Dropdown-Daten, dann müssen Sie definitiv einen Fehler bei der Platzierung von Funktionen gemacht haben und sonst nichts.

7

Name der Selectpicker-Klasse ändern, wenn sie ausgeblendet ist:

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

Beim Erfrischen:

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

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

    setTimeout(() => {
      jQuery('.selectpicker').selectpicker('refresh');
    }, 500);
1
Faiyaz Md Abdul

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

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

aber leider hatte dies nicht funktioniert, bis ich eine weitere Zeile wie folgt eingefügt habe:

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