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

Im Bereich der Formularentwicklung werden kaskadierende Dropdown-Menüs häufig verwendet, um ein benutzerfreundlicheres und benutzerfreundlicheres Formular bereitzustellen dynamisches Erlebnis. Um die Kompatibilität zu verbessern und browserübergreifende Probleme zu beheben, bietet jQuery eine robuste Lösung zum asynchronen Füllen dieser Dropdowns.

Die ursprüngliche JavaScript-Funktion zum Erstellen kaskadierender Dropdowns, die im Problem gezeigt wird, war nicht mit dem IE kompatibel. Um dieses Problem zu lösen, können wir die Leistungsfähigkeit von jQuery nutzen und den Prozess vereinfachen.

jQuery-Lösung:

Die jQuery-Lösung ist prägnant und elegant:

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 ''   lcn   ''
        }).join('');
        $locations.html(html)
    });
});

So funktioniert es:

1. Wir definieren ein Standortobjekt, das Länder den zugehörigen Städten zuordnet.
2. Wir identifizieren die Länder-Dropdown (#country) und das Standort-Dropdown (#location).
3. Wenn ein Land im Länder-Dropdown ausgewählt wird, ruft der Event-Handler die entsprechenden Städte aus dem Standortobjekt ab.
4. Das Städte werden in HTML-Optionen konvertiert und zum Füllen des Standort-Dropdowns verwendet.

Diese jQuery-Lösung füllt das Standort-Dropdown nahtlos mit den entsprechenden Städten basierend auf dem ausgewählten Land. Seine Einfachheit und Kompatibilität mit verschiedenen Browsern machen es zur idealen Wahl für die Verbesserung des Benutzererlebnisses in Formularanwendungen.