Comment remplir les listes déroulantes en cascade avec jQuery pour une meilleure compatibilité des navigateurs ?

Remplir les listes déroulantes en cascade avec jQuery

Arrière-plan

Vous avez rencontré un défi en essayant de créer un formulaire avec des listes déroulantes dynamiques en cascade en utilisant à la fois HTML et JavaScript. Votre code JavaScript initial a fonctionné, mais des problèmes de compatibilité sont survenus dans Internet Explorer. Par conséquent, vous cherchez à passer à jQuery pour une compatibilité améliorée.

La solution

La solution à votre problème est étonnamment simple :

<br> jQuery(function ($) {</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">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)
});