it-swarm.com.de

wie aktualisiere ich das Select2-Dropdown-Menü, nachdem ajax verschiedene Inhalte geladen hat?

Ich verwende Select2 in einer Kombination von Dropdown-Menüs. Ich habe ein Menü für "Länder" und eines für "Bundesländer". Je nach ausgewähltem Land ändert sich die Dropdown-Liste "Bundesländer". Die Bundesländer werden mit ajax aus einer Datenbank abgerufen und dann wie folgt angezeigt:

$display_output = '<select style="width:350px;" tabindex="2" name="state" id="state" data-placeholder="Choose a Country..."> ';
$display_output .= '<option value="" selected>Select a State</option> ';

while ($state_details = $this->fetch_array($sql_select_states))
{
    $display_output .= '<option value="' . $state_details['id'] . '" ' . (($selected_value == $state_details['id']) ? 'selected' : ''). '>' . $state_details['s.name'] . '</option>';
}

$display_output .= '</select>';

So weit, ist es gut. Alle Provinzen ändern sich korrekt, aber wenn Select2 zum ersten Mal geladen wird, wird "undefined" für das Dropdown-Menü angezeigt, obwohl ich es als gesetzt habe

data-placeholder="Choose a Country..."

Ich nehme an, es könnte daran liegen, dass das Land beim Laden "Vereinigte Staaten" ist und eine Liste von Staaten enthält, aber keiner von ihnen ist Standard oder ausgewählt. Gibt es eine andere Möglichkeit, einen Standardwert so zu definieren, dass "Undefined" nicht angezeigt wird?

Und ein anderes (aber weniger wichtiges) Problem ist, dass, wenn jemand beispielsweise "Vereinigte Staaten" wählt und dann "Arizona" wählt, wenn die Person dann zu "Kanada" als Land wechselt, der Staat "Arizona" aber immer noch bleibt Bei Auswahl der Dropdown-Liste können die Provinzen Kanadas ausgewählt werden. Gibt es eine Möglichkeit, den Standardwert vorübergehend wiederherzustellen, wenn jemand ein anderes Land auswählt, bis eine Provinz erneut ausgewählt wird?

Mein Ladecode ist momentan nur:

<script>
$(document).ready(function() { $("#state").select2(); });
</script>
20
user1227914

Wählen Sie 3. *

Siehe Select2-Daten aktualisieren, ohne die Steuerung neu aufzubauen da dies ein Duplikat sein kann. Eine andere Möglichkeit besteht darin, das select2-Element zu zerstören und dann neu zu erstellen.

$("#dropdown").select2("destroy");

$("#dropdown").select2();

Wenn Sie Probleme haben, den Bundesstaat/die Region bei einem Länderwechsel zurückzusetzen, löschen Sie den aktuellen Wert mit 

$("#dropdown").select2("val", "");

Sie können die Dokumentation hier http://ivaynberg.github.io/select2/ anzeigen, die fast alle Funktionen beschreibt. Select2 unterstützt Ereignisse wie change, mit denen nachfolgende Dropdowns aktualisiert werden können.

$("#dropdown").on("change", function(e) {});

Wählen Sie 4. * Update

Sie können jetzt die Daten/Liste aktualisieren, ohne das Steuerelement neu erstellen zu müssen:

fooBarDropdown.select2({
    data: fromAccountData
});
41
SamV

Es ist üblich, dass andere Komponenten das change -Ereignis abhören, oder dass benutzerdefinierte Event-Handler angehängt werden, die Nebenwirkungen haben können. Select2 hat kein benutzerdefiniertes Ereignis (wie Select2: Update) , das anders als change ausgelöst werden kann. Sie können sich auf den Ereignis-Namespace von jQuery verlassen, um den Geltungsbereich auf Select2 zu beschränken, indem Sie das Ereignis * change.select2 auslösen.

$('#state').trigger('change.select2'); // Notify only Select2 of changes
11
Chintan7027

select2 hat den Parameter placeholder. Verwenden Sie diese

$("#state").select2({
   placeholder: "Choose a Country"
 });
3
Khawer Zeshan

Verwenden Sie das folgende Skript, nachdem Sie Ihre Auswahl angehängt haben.

$('#state').select2();

Verwenden Sie nicht destroy.

1
Parth Patel

Zuletzt behobenes Problem der Neuinitialisierung von select2 nach einem Ajax-Aufruf.

Sie können dies in der Erfolgsfunktion von Ajax aufrufen.

Hinweis: Vergessen Sie nicht, ".selector" in Ihre Klasse des Elements <select class="selector"> Zu ersetzen.

jQuery('.select2-container').remove();

jQuery('.selector').select2({
   placeholder: "Placeholder text",
   allowClear: true
});

jQuery('.select2-container').css('width','100%');
0
Mayank Dudakiya