Comment remplir dynamiquement des listes déroulantes en cascade avec jQuery ?

Remplir les listes déroulantes en cascade avec jQuery

Problème

En créant un formulaire avec deux listes déroulantes (Pays et Ville), vous devez les rendre dynamiques pour que seules les villes du pays sélectionné sont visibles. Vous avez converti votre JavaScript en jQuery pour une meilleure compatibilité, mais vous êtes toujours confronté à certains problèmes.

JavaScript original

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

Solution jQuery

Le code jQuery suivant obtient le résultat souhaité :

<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

Ce code stocke les relations pays-ville dans l'objet locations. Lorsque la liste déroulante des pays est modifiée, le gestionnaire d'événements de changement obtient le pays sélectionné et récupère les villes correspondantes à partir de l'objet locations. Il construit ensuite les options HTML pour les villes et remplace le contenu de la liste déroulante des emplacements.

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!