Question

Three things: select box 1, input box, select box 2.
Based on the selections in select box 1 (drop down list 1), I want either input box to be visible or select box 2 to be visible, but not both.

Any help would be great 🙂 I am populating the options in select box 2 based on the choice in select box 1, but sometimes the user’s choice entitles them to enter anything as the input, instead of just choosing from a list of values.

Does anyone know how I can hide/show or add/remove these elements from the page? Would it be more-or-less the same if I had it create a new input box or select box 2 every time the selection changes, and just destroy the last one?

Based on some other questions I notice that I can change the style:none like here
StackOverflow> Replacing a dropdown menu with a text menu
is this the most desirable way to go about this?

I’m still learning the basics of js / DOM so any help (and explanation) would be greatly appreciated!

Answer 1

<select name='field' id='field' size='1' onchange='checkthis(this);'>
 <option>please select something</option>
 <option value='1'>1</option>
 <option value='2'>2</option>
 <option value='3'>3</option>
 <option value='4'>4</option>
</select>
<input type='text' id='text1' name='text1' value='' />

<select name='field2' id='field2' size='1'>
 <option>please select something</option>
 <option value='1'>1</option>
 <option value='2'>2</option>
 <option value='3'>3</option>
 <option value='4'>4</option>
</select>

<input type='button' id='button' value='Click Me' />

<script language='javascript' type='text/javascript'>
function checkthis(fld) {
 switch (fld.selectedIndex) {
  case 0:
   document.getElementById("text1").style.display = "none";
   document.getElementById("field2").style.display = "block";
   break;
  case 1:
   document.getElementById("text1").style.display = "block";
   document.getElementById("field2").style.display = "block";
   break;
  case 2:
   document.getElementById("text1").style.display = "block";
   document.getElementById("field2").style.display = "none";
   break;
  case 3:
   document.getElementById("text1").style.display = "none";
   document.getElementById("field2").style.display = "none";
   break;

 }
}
</script>