Comment remplir une liste déroulante en cascade avec JQuery dans IE ?

Remplir une liste déroulante en cascade avec JQuery

Problème :

Afin de créer une expérience utilisateur plus interactive, vous souhaitez pour remplir une liste déroulante avec des options de manière dynamique en fonction de la sélection effectuée dans une liste déroulante parent. Vous avez tenté de le faire en utilisant JavaScript, mais vous êtes confronté à des problèmes de compatibilité dans IE.

Solution :

Pour améliorer la compatibilité et simplifier la mise en œuvre, convertissons votre code JavaScript vers JQuery. Voici comment réaliser des listes déroulantes en cascade à l'aide de JQuery :

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

Explication :

• Nous définissons un objet locations pour stocker tous les emplacements possibles pour chaque pays .
• Lorsque la liste déroulante des pays change, le gestionnaire d'événements change() est déclenché.
• Nous récupérons le pays sélectionné et le tableau locations correspondant à partir de l'objet locations.
• Utilisation Avec la fonction $.map() de JQuery, nous créons une chaîne d'options HTML représentant les emplacements.
• Enfin, nous remplissons la liste déroulante #location avec les options HTML générées.

Démo :

Essayez une démo en direct sur Fiddle : https://jsfiddle.net/HvXSz/.

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!