如何使用第一个下拉列表的onChange事件填充另一个下拉列表？ [英] How can I populate another dropdown with the onChange event of the first dropdown?

问题描述

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

onChange事件是怎么样的？

解决方案

下面是一个功能强大但不太优雅的解决方案。根据先选择美国（美国）还是加拿大（CA），这是填充州/省选择列表的一种方式。美国和美国国家在默认情况下是可见的。这种方法依赖于一个简单的类命名约定来根据他们的父母国家对州选项进行分组。

JS：

$（$＃$ $''$ s $' '#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_stateid =s_state> 
< option value =none>< / option> 
 <？ foreach（$ states_us as $ v）：
 $ selected =（$ v-> state_code == $ current_state）？'selected =selected'：''; ？> 
< option class =state_USvalue =<？= $ v-> state_code？> < = $选择>？; >< = ucfirst（$ V->状态）GT;？< /选项> 
 <？ endforeach;？> 
 <？ foreach（$ states_ca as $ v）：
 $ selected =（$ v-> state_code == set_value（'s_state'））？'selected =selected'：''; ？> 
< option class =state_CAvalue =<？= $ v-> state_code？> < = $选择;？>>< = ucfirst（$ V->状态）GT;？< /选项> 
 <？ endforeach; ？> 
< / select> 
  

希望这有助于您。

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?

解决方案

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.

这篇关于如何使用第一个下拉列表的onChange事件填充另一个下拉列表？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！