用javascript替換選擇項（下拉菜單）中的輸入字段

Question

三件事： 選擇框1，輸入框，選擇框2 。
基於選擇框1 （下拉列表1）中的選擇 ，我希望輸入框是可見的，或者希望選擇框2是可見的，但不能同時顯示兩個。

任何幫助將是非常有用的:)我根據選擇框1中的選擇來填充選擇框2中的選項，但有時用戶的選擇使他們有權輸入任何內容作為輸入，而不僅僅是從值列表中進行選擇。

有誰知道我如何從頁面中隱藏/顯示或添加/刪除這些元素？ 如果我每次選擇更改一次都創建一個新的輸入框或選擇框2 ，然后銷毀最后一個輸入框，它會大致相同嗎？

基於其他一些問題，我注意到我可以更改樣式：沒有像這里這樣
StackOverflow>用文本菜單替換下拉菜單
這是最理想的解決方法嗎？

我仍在學習js / DOM的基礎知識，因此任何幫助（和解釋）將不勝感激！

Answer 1

這將隱藏一個元素：

style="display:none;"

這將顯示一個元素：

style="display:block;"

您可以使用javascript函數處理onchange事件，該函數將確定要隱藏或顯示的元素，然后更改相應元素的樣式。

順便說一句，使用JQuery時，這種工作要容易得多。 （但這確實使您無法學習DOM的某些部分，如果那是您的真正目標。）

您還可以使用CSS類來實現相同的目標，如果您想一次更改許多樣式屬性，則效果更好。 （JQuery將使用addClass，removeClass或toggleClass函數。）

完全不同的方法：

也許您真正想要的是一個混合文本框/下拉菜單，稱為自動提示文本框。 它可以讓您選擇一個值，同時還允許在需要時自由輸入。

Answer 2

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