基于其他下拉选项动态填充一个下拉列表

我有一个下拉按钮用于选择性别（男性或女性）和另一个下拉按钮来选择婚姻状况。基于其他下拉选项动态填充一个下拉列表

当选择性别为男性，那么婚姻状况下拉按钮应列明：

未婚
结婚
离婚，
鳏夫

当选择性别作为女性婚姻状况下拉按钮应该p opulate：

未婚
结婚
离婚，
寡妇

根据在第一个下拉按钮，第二个下拉的向下按钮的内容应该选择更改。

任何人都可以帮助我做到这一点？

来源

2011-11-21 Amith

只需使用“寡妇”。除了不分性别之外，它与你的其他选择在语法上是一致的，未婚，已婚和离婚。这些都是国家（形容词或严格地说是分词），而寡妇/ wid夫是名词。 – Verbeia

@Verbeia，你是对的。但我想这个问题无论如何都需要一个技术答案。 – Anthony

UPDATE：添加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 /平变化

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陈ge寡妇/ wid夫

window.onload = function(){updateMaritalStatus()};

来源

2011-11-21 05:28:18 david

为什么不只是使用丧偶？它匹配其他选择的时态。

来源

2011-11-21 05:00:42

给我的要求是，如果我们选择男性，那么下拉应该是wid夫，如果我选择女性，它应该是寡妇 – Amith

@Radhika这是一个值得回到业务分析师并澄清要求的案例。 – Verbeia

而不是切换出整个列表，而只是切换最后一个元素呢？

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

这应该创建你要找的效果。

来源

2011-11-21 05:01:32 rockerest

基于其他下拉选项动态填充一个下拉列表

回答

相关问题