Comment remplir une liste déroulante en cascade avec des villes basées sur le pays sélectionné à l'aide de jQuery ?

Remplir une liste déroulante en cascade avec JQuery

Problème :

Vous souhaitez créer une dynamique formulaire avec deux listes déroulantes (Pays et Ville) utilisant JQuery, garantissant que seules les villes correspondant au pays sélectionné sont affichées dans la liste déroulante Ville.

Code JavaScript original :

La fonction JavaScript d'origine, bien qu'elle fonctionne, est confrontée à des problèmes de compatibilité dans Internet Explorer. Il remplit dynamiquement la liste déroulante Ville en fonction du pays sélectionné, en s'appuyant sur des tableaux d'options de ville codés en dur.

Implémentation de JQuery :

Pour améliorer la compatibilité et simplifier la mise en œuvre, JQuery peuvent être employés. Voici une approche efficace utilisant 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 des emplacements d'objets qui mappent les pays à des tableaux de villes correspondantes.
• Le gestionnaire d'événements de changement pour la liste déroulante Pays déclenche le remplissage dynamique de la liste déroulante Ville.
• Le gestionnaire d'événements obtient le pays sélectionné et récupère le tableau de villes correspondant à partir de l'objet locations.
• Une boucle crée des éléments d'option HTML pour les villes et les ajoute à la liste déroulante Ville à l'aide de $locations.html(html).

Démo :

Vous pouvez reportez-vous au lien Fiddle fourni pour une démo fonctionnelle.

Cette implémentation de JQuery est concise, compatible avec tous les navigateurs et facilite le remplissage dynamique de la liste déroulante en cascade.

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!