Comment puis-je remplir une liste déroulante en cascade avec jQuery pour une meilleure compatibilité et une meilleure expérience utilisateur ?

Remplir une liste déroulante en cascade avec jQuery

Dans le domaine du développement de formulaires, les listes déroulantes en cascade sont fréquemment utilisées pour fournir une interface plus conviviale et expérience dynamique. Pour améliorer la compatibilité et résoudre les problèmes entre navigateurs, jQuery propose une solution robuste pour remplir ces listes déroulantes de manière asynchrone.

La fonction JavaScript d'origine permettant de créer des listes déroulantes en cascade, présentée dans le problème, manquait de compatibilité avec IE. Pour résoudre ce problème, nous pouvons exploiter la puissance de jQuery et simplifier le processus.

Solution jQuery :

La solution jQuery est concise et élégante :

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

Comment ça marche :

1. Nous définissons un objet de localisation qui mappe les pays à leurs villes associées.
2. Nous identifions la liste déroulante des pays (#country ) et la liste déroulante de localisation (#location).
3. Lorsqu'un pays est sélectionné dans la liste déroulante des pays, le gestionnaire d'événements récupère les villes correspondantes à partir de l'objet locations.
4. Les villes sont converties en HTML options et utilisé pour remplir la liste déroulante des emplacements.

Cette solution jQuery remplit de manière transparente la liste déroulante des emplacements avec les villes appropriées en fonction du pays sélectionné. Sa simplicité et sa compatibilité avec différents navigateurs en font un choix idéal pour améliorer l'expérience utilisateur dans les applications de formulaires.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!