兩個帶有“其他”選項的選擇框

Question

我有一個帶有其他選項的選擇字段的工作代碼，當選擇其他選項時會顯示一個文本框。 但是，我在同一頁面上為2個選擇框編寫代碼時遇到了麻煩。

這是我的劇本。

  function toggleField(val) { var o = document.getElementById('other'); (val == 'Other') ? o.style.display = 'block': o.style.display = 'none'; } 

 <SELECT NAME="i_skate" SIZE="1" ONCHANGE="toggleField(this.value);"> <OPTION VALUE="Just a Fan">Just a Fan</OPTION> <OPTION VALUE="Everyday">Everyday</OPTION> <OPTION VALUE="Few times a Week">Few times a Week Week </OPTION> <OPTION VALUE="Few times a Month">Few times a Month Month </OPTION> <OPTION VALUE="Other">Other</OPTION> </SELECT> <INPUT TYPE="TEXT" NAME="other" ID="other" STYLE="display: none;" SIZE="20"> </TD> <TD WIDTH="10" ALIGN="LEFT"></TD> <TD WIDTH="110" ALIGN="LEFT" VALIGN="TOP"> <SELECT NAME="my-style" SIZE="1" ONCHANGE="toggleField(this.value);"> <OPTION VALUE="Street Skate">Street Skate</OPTION> <OPTION VALUE="Downhill">Downhill</OPTION> <OPTION VALUE="Freestyle">Freestyle</OPTION> <OPTION VALUE="Pools-Bowls">Pools-Bowls</OPTION> <OPTION VALUE="Vert Halfpipe">Vert Halfpipe</OPTION> <OPTION VALUE="Park">Park</OPTION> <OPTION VALUE="Mini Ramp">Mini Ramp</OPTION> <OPTION VALUE="Other1">Other1</OPTION> </SELECT> <INPUT TYPE="TEXT" NAME="other1" ID="other1" STYLE="display: none;" SIZE="20"> 

我想念什么？

Answer 1

如果我對您的理解正確，則只想在選擇“ Other1”時讓第二個SELECT標記顯示第二個INPUT框，就像第一個SELECT標記為“ Other”一樣。

您確實很接近，但是您的Javascript需要一些調整。 當前正在測試“ Other”元素的更改，然后更改對象o的顯示，該對象是對ID為“ other”的元素的引用。 您將需要對此邏輯進行擴展，以包括新的選擇框（選項為“ Other1”）和相應的INPUT框。

因此，您可能需要執行以下操作：

<SCRIPT TYPE="text/javascript">
function toggleField(val) {
  var o = document.getElementById('other');
  var o1 = document.getElementById('other1');
  (val == 'Other')? o.style.display = 'block' : o.style.display = 'none';
  (val == 'Other1')? o1.style.display = 'block' : o1.style.display = 'none';
}
</SCRIPT>

這會將相同的功能從第一個SELECT擴展到第二個SELECT。