用javascript替换选择选项（下拉菜单）中的输入字段

三件事：选择框1，输入框，选择框2。 根据“选择框1”下拉列表1中的选择，我希望输入框可见或选择框2可见，但不能同时显示两者

任何帮助都很好：我正在根据选择框1中的选项填充选择框2中的选项，但有时用户的选择使他们有权输入任何内容作为输入，而不仅仅是从值列表中选择

有人知道如何在页面中隐藏/显示或添加/删除这些元素吗？如果我让它在每次选择更改时创建一个新的输入框或选择框2，然后只销毁最后一个输入框，这会有或多或少的相同吗

基于其他一些问题，我注意到我可以改变风格：没有人喜欢这里 这是最理想的方式吗

---

我仍在学习js/DOM的基础知识，因此任何帮助和解释都将不胜感激

这将隐藏一个元素：

style="display:none;"

style="display:block;"

这将显示一个元素：

style="display:none;"

style="display:block;"

可以使用javascript函数处理onchange事件，该函数将确定要隐藏或显示的元素，然后更改相应元素的样式

顺便说一句，使用JQuery时，这类工作要容易得多。但如果这是您的真正目标，它确实会阻止您学习DOM的某些部分

您还可以使用CSS类来实现相同的目标，如果您想一次更改多个样式属性，这会更好。JQuery将使用addClass、removeClass或toggleClass函数

完全不同的方法：

---

也许你真正想要的是一个混合文本框/下拉列表，称为自动提示文本框。它允许您选择一个值，同时还允许在需要时自由键入

希望有帮助。您需要捕获第一次select的onchange事件，并使用selectedIndex属性来确定是否希望其他元素显示。非常有指导意义。谢谢。虽然我不需要这个应用程序，但autosuggest文本框真的很有趣！谢谢你的蘑菇！

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