Question

I have a drop down button for selecting the gender (Male or female) and another drop down button for selecting marital status.

When selecting gender as male, then the marital status drop down button should list out:

• unmarried
• married
• divorced, and
• widower

When selecting gender as female the marital status drop down button should populate:

• unmarried
• married
• divorced, and
• widow

Based on the selection in the first drop down button, the contents of second drop down button should change.

Can anyone help me do this?

Answer 1

UPDATE:
add id="gender" and onchange="updateMaritalStatus(this)" to the first select

   <select id="gender" onchange="updateMaritalStatus(this)">

keep the second select option on one line

   <select id="marital"><option>Unmarried</option><option>Married</option><option>Divorced</option><option>Widow</option></select>

function for 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;
  }

add onload the change the widow/widower

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