Question

How would I populate a select dropdown whose values are dependent on what is selected in the parent dropdown. E-g, First dropdown has country names in it, and on selection the next dropdown would load the corresponding states of that country, selected in first dropdown. And then say I have a third dropdown, where I am putting the image of that particular state, that corresponds to what is selected in second dropdown.

How can this be done in JQuery.

E-g

Country>>>>> States>>>>>>Map of This State

Answer 1

Look at this plugin: cascade
You can have a few css classes for each state those flag you want to show with appropriate background image and swith class on second dropdown change event:

var statesList = [
    {
    'When': 'US',
    'Value': 'nope',
    'Text': 'Select state'},
{
    'When': 'US',
    'Value': 'US_AL',
    'Text': 'Alabama'},

{
    'When': 'US',
    'Value': 'US_AK',
    'Text': 'Alaska'},
{
    'When': 'IN',
    'Value': 'nope',
    'Text': 'Select state'},
{
    'When': 'IN',
    'Value': 'IN_AP',
    'Text': 'Andra Pradesh'},

{
    'When': 'IN',
    'Value': 'IN_AS',
    'Text': 'Assam'}
];

$("#state").cascade("#country", {
    list: statesList,
    template: function(item) {
        return "<option value='" + item.Value + "'>" + item.Text + "</option>";
    },
    match: function(selectedValue) {
        return this.When == selectedValue;
    }
});

$("#state").change(function() {
    $("#flag").removeClass().addClass($(this).val());
});

<label>Country
    <select id="country">
        <option value="nope">Choose a country</option>
        <option value="US">United States</option>
        <option value="IN">India</option>
    </select>
</label>

<label>State
    <select id="state">
        <option value='nope'>Select a country before</option>
    </select>
</label>

<span id="flag" style="border: 1px solid #000; padding: 1px;">
</span>