Rellenar un menú desplegable en cascada con JQuery

Problema:

Su objetivo es crear una lista dinámica formulario con dos desplegables (País y Ciudad) usando JQuery, asegurando que en la Ciudad solo se muestren las ciudades correspondientes al país seleccionado desplegable.

Código JavaScript original:

La función JavaScript original, mientras funciona, enfrenta problemas de compatibilidad en Internet Explorer. Completa dinámicamente el menú desplegable Ciudad según el país seleccionado, basándose en matrices codificadas de opciones de ciudad.

Implementación de JQuery:

Para mejorar la compatibilidad y simplificar la implementación, JQuery puede ser empleado. Aquí hay un enfoque eficiente usando 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)
  });
});

Explicación:

• Definimos ubicaciones de objetos que asignan países a conjuntos de ciudades correspondientes.
• El controlador de eventos de cambio para el menú desplegable País activa la población dinámica del menú desplegable Ciudad.
• El controlador de eventos obtiene el país seleccionado y recupera la matriz de ciudades correspondiente de las ubicaciones object.
• Un bucle crea elementos de opción HTML para las ciudades y los agrega al menú desplegable Ciudad usando $locations.html(html).

Demostración:

Puede consultar el enlace de Fiddle proporcionado para ver una demostración funcional.

Esta implementación de JQuery es concisa, compatible con todos los navegadores y facilita la población dinámica del menú desplegable en cascada.