Заполнение каскадного раскрывающегося списка с помощью JQuery

Проблема:

Вы стремитесь создать динамичный форма с двумя раскрывающимися списками (Страна и Город) с использованием JQuery, гарантируя, что в Городе отображаются только города, соответствующие выбранной стране. раскрывающийся список.

Исходный код JavaScript:

Исходная функция JavaScript при работе сталкивается с проблемами совместимости в Internet Explorer. Он динамически заполняет раскрывающийся список «Город» в зависимости от выбранной страны, опираясь на жестко закодированные массивы вариантов города.

Реализация JQuery:

Для улучшения совместимости и упрощения реализации JQuery можно трудоустроить. Вот эффективный подход с использованием 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)
  });
});

Объяснение:

• Мы определяем местоположение объекта, который сопоставляет страны с массивами соответствующих городов.
• Обработчик событий изменения для раскрывающегося списка «Страна» запускает динамическое заполнение раскрывающегося списка «Город».
• Обработчик событий получает выбранную страну и извлекает соответствующий массив городов из местоположений. object.
• Цикл создает элементы параметров HTML для городов и добавляет их в раскрывающийся список «Город» с помощью $locations.html(html).

Демо:

Вы можете обратиться к предоставленной ссылке Fiddle для рабочей демонстрации.

Эта реализация JQuery является лаконичной, кроссбраузерной и облегчает динамическое заполнение каскадного раскрывающегося списка.