如何使用第一个下拉列表中的onChange事件填充另一个下拉列表?

时间:2008-11-16 15:05:48

标签: javascript jquery html

使用jquery,或者只使用简单的javascript,我想从第一个下拉列表中选择填充第二个下拉列表。 第一个下拉列表的值是获取第二个下拉列表的行的条件。

onChange事件如何?

2 个答案:

答案 0 :(得分:5)

实际上有一个插件可以做到......

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

答案 1 :(得分:2)

随后是功能性但不太优雅的解决方案。这是根据是否首先选择美国(US)或加拿大(CA)来填充州/省选择列表的方法。默认情况下可以看到美国和美国。此方法依赖于简单的类命名约定,以根据其父国家对状态选项进行分组。

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>

希望这有帮助。