Replacing input fields from select choices (dropdown menu) with javascript

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 l开发者_如何学Pythonast 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!

---

<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>

---

This will hide an element:

style="display:none;"

This will show an element:

style="display:block;"

You can handle the onchange event with a javascript function that will determine which element to hide or show, then change the style for the appropriate element.

BTW, this sort of work is MUCH easier when using JQuery. (But it does shield you from learning some parts of the DOM, if that was your real goal.)

You could also use CSS classes to achieve the same goals, which works better if you want to change many style properties at once. (JQuery would use the addClass, removeClass, or toggleClass functions.)

TOTALLY DIFFERENT APPROACH:

Maybe what you really want is a hybrid textbox / dropdown, called an autosuggest textbox. It would let you select a value, while also allowing free typing when needed.