Display followup questions based on selection in dropdown

[kristen10]

I have a form that has a dropdown box. Depending on which selection is chosen, I need a related question to be displayed. I have code right now that works, but only for one option. I'll post the code that is currently working below - what I need is to modify that code to allow for more than one "customoption". I think that something about the "(this)" suffix might be in order? I do not know javascript well at all, so I'm sorry if this is not a helpful enough description of my problem, or if it is something totally simple! I've googled for days and can't seem to figure it out. THanks so much!

<script type="text/javascript"><!--
if(document.all && !document.getElementById) { //IE4 support
  document.getElementById = function(id) { return document.all[id]; }
}

/*

This works in Firefox, Netscape 6+, IE4+/Win, Opera 7+, Konqueror 3, Safari, 
IE5/Mac, and iCab 3.

*/
function customOption(selected) { //selected is the selected option
if(!document.getElementById) return;
  // selected's value property is retrieved and converted to lower case to make comparing it to another string simpler
  var val = selected.value.toLowerCase();

  // gets the object reference for the element
  var el = document.getElementById('other1label');

  // if val is set to 'customoption' show the textbox
  if(val == 'customoption') { el.style.display='block';
  // otherwise hide it or keep it hidden.
  } else { el.style.display='none'; }

}

function dss_addLoadEvent(fn) {
  if(typeof(fn)!="function")return;
  var tempFunc=window.onload;
  window.onload=function() {
    if(typeof(tempFunc)=="function")tempFunc();
    fn();
  }
}
dss_addLoadEvent(function() {
  // we find the form element and the select element and attach the event 
  // handlers to them
  var f = document.form1;

  var sel = f.select1;
  sel.onchange=function(){customOption(this.options[this.selectedIndex])}

  // we call the function when the page loads to hide #other1label initially
  sel.onchange();
});
// -->

</script>

<select name="relationship" id="select1">
        <option></option>
        <option value="customoption">Mother</option>
        <option value="customoption">Father</option>
        <option value="customoption">Grandparent</option>
        <option value="4">Potential Child Care Provider</option>
        <option value="5">Child Care Provider</option>
 	<option value="6">Other</option>
</select>

<div id="other1label">How many children under 5 live in your household? <input type="text" name="children_under_5"  id="other1" style="width:45px;" /></div>

[ubh]

Something like this?

<script type="text/javascript">
function turnThemOff()
{
var getq1 = document.getElementById("q1").style.display="none";
var getq2 = document.getElementById("q2").style.display="none";
var getq3 = document.getElementById("q3").style.display="none";
var getq4 = document.getElementById("q4").style.display="none";
var getq5 = document.getElementById("q5").style.display="none";
var getq6 = document.getElementById("q6").style.display="none";
}

function testValue(selection) {
  if (selection.value == "Mother") {
  turnThemOff();
		var getq1 = document.getElementById("q1").style.display="block";
    }
	
  else if (selection.value == "Father") {
  turnThemOff();  
		var getq2 = document.getElementById("q2").style.display="block";
    }
	
  else if (selection.value == "Grandparent") {
  turnThemOff();
		var getq3 = document.getElementById("q3").style.display="block";
    }
	
  else if (selection.value == "Potential Child Care Provider") {
  turnThemOff();
		var getq4 = document.getElementById("q4").style.display="block";
    }
	
  else if (selection.value == "Child Care Provider") {
  turnThemOff();
		var getq5 = document.getElementById("q5").style.display="block";
    }
	
  else if (selection.value == "Other") {
  turnThemOff();
		var getq6 = document.getElementById("q6").style.display="block";
    }			
  else {
  	  <!-- IF THE EMPTY OPTION IS SELECTED THEN TURN ALL QUESTIONS OFF -->
      turnThemOff();
    }
  }
</script>

<select onchange="testValue(this);">
        <option></option>
        <option value="Mother">Mother</option>
        <option value="Father">Father</option>
        <option value="Grandparent">Grandparent</option>
        <option value="Potential Child Care Provider">Potential Child Care Provider</option>
        <option value="Child Care Provider">Child Care Provider</option>
 		<option value="Other">Other</option>
</select>



<div id="q1" style="display:none;">Mother Question</div>
<div id="q2" style="display:none;">Father Question</div>
<div id="q3" style="display:none;">Grandparent Question</div>
<div id="q4" style="display:none;">Potential_care Question</div>
<div id="q5" style="display:none;">Care Provider Question</div>
<div id="q6" style="display:none;">Other Question</div>