我有一个用于选择性别(男性或女性)的下拉按钮和另一个用于选择婚姻状况的下拉按钮。
当选择性别为男性时,婚姻状况下拉按钮应列出:
当选择性别为女性时,婚姻状况下拉按钮应填充:
根据第一个下拉按钮中的选择,第二个下拉按钮的内容应该改变。
任何人都可以帮我这么做吗?
答案 0 :(得分:0)
为什么不使用丧偶?它匹配其他选择的时态。
答案 1 :(得分:0)
而不是切换整个列表,而不是仅仅切换最后一个元素呢?
<select>
<option class="gender" value="m">Male</option>
<option class="gender" value="f">Female</option>
</select>
<select id="marital">
<option>Unmarried</option>
<option>Married</option>
<option>Divorced</option>
<option>Widow</option>
</select>
现在,使用jQuery简化Javascript(如果您愿意,可以转换为纯JS):
$('.gender').click(function(){
var w = $('#marital').children().last();
if( $(this).attr('value') == 'm' )
{
w.text('Widower');
}
else
{
w.text('Widow');
}
});
这应该会产生你正在寻找的效果。
答案 2 :(得分:0)
更新:
将id="gender"
和onchange="updateMaritalStatus(this)"
添加到第一个选择
<select id="gender" onchange="updateMaritalStatus(this)">
将第二个选择选项保留在一行
<select id="marital"><option>Unmarried</option><option>Married</option><option>Divorced</option><option>Widow</option></select>
onload / onchange的功能
function updateMaritalStatus(o){
var gen = document.getElementById("gender"), marital_status = "";
if(o){
marital_status = o.value == "m" ? " widower" : "widow"
}else{
marital_status = gen.selectedIndex == 0 ? "widower" : "widow";
}
document.getElementById("marital").lastChild.text = marital_status;
}
添加onload
改变寡妇/ w夫
window.onload = function (){updateMaritalStatus()};