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

Question

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 ge

Answer 1

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.

Answer 2

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

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