How can I populate another dropdown with the onChange event of the first dropdown?

Question

Hi,

with jquery, or with simple just javascript, I want to populate a 2nd dropdown from the choice of the first dropdown. The value of the first dropdown is the condition to get rows for the second dropdown.

How does the onChange event look like?

Answer 1

there is actually a plugin that does just that ...

http://code.google.com/p/jqueryselectcombo/

Answer 2

A functional but less elegant solution follows. This is a way to populate a states/province select list based on whether the United States (US) or Canada (CA) is chosen first. US and US States are visible by default. This method relies on a simple class naming convention to group the state options based on their parent country.

The JS:

$('#s_country').change(function() {
    $('#s_state .state_CA').hide();
    $('#s_state .state_US').hide();
    $('#s_state').val('');
    var value = $.trim($("#s_country").val());
    $('#s_state').show();
    $('#s_state .state_'+ value).show();
});

The HTML:

<select name="s_state" id="s_state">
<option value="none"></option>
<? foreach ($states_us as $v):
    $selected = ($v->state_code == $current_state)?'selected="selected"':''; ?>
    <option class="state_US" value="<?=$v->state_code?>" <?=$selected?> ><?=ucfirst($v->state)?></option>
<? endforeach;?>
<? foreach ($states_ca as $v):
    $selected = ($v->state_code == set_value('s_state'))?'selected="selected"':'';                          ?>
    <option class="state_CA" value="<?=$v->state_code?>" <?=$selected;?>><?=ucfirst($v->state)?></option>
<? endforeach; ?>   
</select>

Hope this helps.