兩個帶「其他」選項的選擇框

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框，就像第一個標籤爲「其他」一樣。

你真的很接近，但你的Javascript需要一些調整。您當前正在測試已更改的「其他」元素，然後更改對象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> 

將從第一次展開相同的功能選擇第二種。