Question

我有一个用于选择性别（男性或女性）的下拉按钮和另一个用于选择婚姻状况的下拉按钮。

当选择性别为男性时，婚姻状况下拉按钮应列出：

未婚
已婚
离婚了，
的鳏夫

当选择性别为女性时，婚姻状况下拉按钮应填充：

未婚
结婚
离婚了，
的寡妇

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

任何人都可以帮我这么做吗？

Answer 1

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

Answer 2

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

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

这应该会产生你正在寻找的效果。

Answer 3

更新：将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()};

根据其他下拉列表中的选择动态填充一个下拉列表

3 个答案: