Wie fülle ich ein kaskadierendes Dropdown-Menü mit JQuery im IE?

Auffüllen eines kaskadierenden Dropdown-Menüs mit JQuery

Problem:

Um eine interaktivere Benutzererfahrung zu schaffen, möchten Sie um ein Dropdown-Menü dynamisch mit Optionen zu füllen, die auf der in einem übergeordneten Dropdown-Menü getroffenen Auswahl basieren. Sie haben versucht, dies mit JavaScript zu tun, aber es treten Kompatibilitätsprobleme im IE auf.

Lösung:

Um die Kompatibilität zu verbessern und die Implementierung zu vereinfachen, führen wir eine Konvertierung durch Ihren JavaScript-Code an JQuery. So können Sie mit JQuery kaskadierende Dropdowns erreichen:

<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>

Erklärung:

• Wir definieren ein Standortobjekt, um alle möglichen Standorte für jedes Land zu speichern .
• Wenn sich das Dropdown-Menü „Land“ ändert, wird der Ereignishandler „change()“ ausgelöst.
• Wir rufen das ausgewählte Land und das entsprechende Standortarray aus dem Standortobjekt ab.
• Mit Mit der $.map()-Funktion von JQuery erstellen wir eine Zeichenfolge von HTML-Optionen, die die Standorte darstellen.
• Schließlich füllen wir das Dropdown-Menü #location mit den generierten HTML-Optionen.

Demo:

Probieren Sie eine Live-Demo auf Fiddle aus: https://jsfiddle.net/HvXSz/.

Das obige ist der detaillierte Inhalt vonWie fülle ich ein kaskadierendes Dropdown-Menü mit JQuery im IE?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!