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 Ville liste déroulante.

Code JavaScript d'origine :

La fonction JavaScript d'origine, tout en fonctionnant, 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 :

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)
  });
});

Explication :

• Nous définissons des emplacements d'objets qui mappent les pays aux tableaux de villes correspondantes.
• Le gestionnaire d'événements de changement pour la liste déroulante Pays déclenche la population 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 des emplacements object.
• 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 vous référer 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.