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

Posted 2023-05-08

【中文标题】如何使用第一个下拉列表的 onChange 事件填充另一个下拉列表？

【英文标题】：How can I populate another dropdown with the onChange event of the first dropdown?

【发布时间】：2010-09-22 13:53:19

【问题描述】：

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

onChange 事件是什么样子的？

【参考方案1】：

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

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

【参考方案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>

希望这会有所帮助。