How to Populate Cascading Dropdowns with jQuery for Improved Browser Compatibility?

Populating Cascading Dropdowns with jQuery

Background

You've encountered a challenge when attempting to make a form with dynamic cascading dropdowns using both HTML and JavaScript. Your initial JavaScript code worked, but compatibility issues arose in Internet Explorer. Consequently, you're seeking to transition to jQuery for enhanced compatibility.

The Solution

The solution to your problem is surprisingly 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)
});

Copy after login

});

Demo

Check out a live demonstration of this solution on [Fiddle](fiddle link here).

The above is the detailed content of How to Populate Cascading Dropdowns with jQuery for Improved Browser Compatibility?. For more information, please follow other related articles on the PHP Chinese website!