Wie füllt man kaskadierende Dropdown-Listen dynamisch mit jQuery?

Kaskadierende Dropdown-Listen mit jQuery füllen

Problem

Wenn Sie ein Formular mit zwei Dropdown-Listen (Land und Stadt) erstellen, müssen Sie diese dynamisch machen, damit Es sind nur die Städte des ausgewählten Landes sichtbar. Sie haben Ihr JavaScript zur besseren Kompatibilität in jQuery konvertiert, aber es treten immer noch einige Probleme auf.

Original-JavaScript

<code class="javascript">function populate(s1, s2) {
    var optionArray;
    switch (s1.value) {
        case "Germany":
            optionArray = ["|", "magdeburg|Magdeburg", "duesseldorf|Duesseldorf", "leinfelden-echterdingen|Leinfelden-Echterdingen", "eschborn|Eschborn"];
            break;
        // ... more cases
        default:
            optionArray = ["|"];
    }

    for (var option in optionArray) {
        var pair = optionArray[option].split("|");
        var newOption = document.createElement("option");
        newOption.value = pair[0];
        newOption.innerHTML = pair[1];
        s2.options.add(newOption);
    }
}</code>

jQuery-Lösung

Der folgende jQuery-Code erzielt das gewünschte Ergebnis:

<code class="javascript">jQuery(function($) {
    var locations = {
        'Germany': ['Duesseldorf', 'Leinfelden-Echterdingen', 'Eschborn'],
        'Spain': ['Barcelona'],
        'Hungary': ['Pecs'],
        'USA': ['Downers Grove'],
        'Mexico': ['Puebla'],
        'South Africa': ['Midrand'],
        'China': ['Beijing'],
        'Russia': ['St. Petersburg'],
    }

    var $locations = $('#location');
    $('#country').change(function () {
        var country = $(this).val(), lcns = locations[country] || [];

        var html = $.map(lcns, function(lcn){
            return `<option value="${lcn}">${lcn}</option>`
        }).join('');
        $locations.html(html)
    });
});</code>

So funktioniert es

Dieser Code speichert die Land-Stadt-Beziehungen im Standortobjekt. Wenn das Länder-Dropdown-Menü geändert wird, ruft der Änderungsereignishandler das ausgewählte Land ab und ruft die entsprechenden Städte aus dem Standortobjekt ab. Anschließend werden HTML-Optionen für die Städte erstellt und der Inhalt des Standort-Dropdowns ersetzt.

Das obige ist der detaillierte Inhalt vonWie füllt man kaskadierende Dropdown-Listen dynamisch mit jQuery?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!