Geek Answers Handbook

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

with jquery or just plain javascript, I want to populate the second drop down list from the first drop down list. The value of the first drop-down list is a condition for obtaining rows for the second drop-down list.

What does the onChange event look like?

+4
source share
2 answers

What follows is a functional but less elegant solution. This is a way to populate a state / provincial selection list based primarily on the United States (USA) or Canada (CA). USA and USA are visible by default. This method is based on a simple class naming convention for grouping state parameters based on their parent country.

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(); });

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.

+2
source

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

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

+5
source

More articles:


All Articles