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

В сфере разработки форм каскадные раскрывающиеся списки часто используются для обеспечения более удобного и динамический опыт. Чтобы улучшить совместимость и решить проблемы с кроссбраузерностью, jQuery предлагает надежное решение для асинхронного заполнения этих раскрывающихся списков.

Исходная функция JavaScript для создания каскадных раскрывающихся списков, показанная в задаче, не была совместима с IE. Чтобы решить эту проблему, мы можем использовать возможности 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)
    });
});

Как это работает:

1. Мы определяем объект Locations, который сопоставляет страны с соответствующими городами.
2. Мы определяем раскрывающийся список страны (#country) и раскрывающийся список местоположения (#location).
3. Когда в раскрывающемся списке стран выбрана страна, обработчик событий извлекает соответствующие города из объекта Locations.
4. Раскрывающийся список стран города преобразуются в параметры HTML и используются для заполнения раскрывающегося списка местоположения.

Это решение jQuery легко заполняет раскрывающийся список местоположения соответствующими городами в зависимости от выбранной страны. Его простота и совместимость с различными браузерами делают его идеальным выбором для улучшения пользовательского опыта в приложениях-формах.