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

Question

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

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

• 未婚
• 已婚
• 离婚，并且
• 鳏夫

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

• 未婚
• 已婚
• 离婚，并且
• 寡妇

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

谁能帮我做这个？

Answer 1

更新: 添加 id="gender" 和 onchange="updateMaritalStatus(this)" 到第一个 select

   <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改变寡妇/鳏夫

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