Два окна выбора с опциями 'Другие'

Question

У меня есть рабочий код для одного поля выбора с другим параметром, который отображает текстовое поле, когда выбрано другое. Тем не менее, у меня возникли проблемы с написанием кода для двух полей выбора на одной странице.

Вот мой сценарий.

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

Если я правильно понимаю вас, вы хотите, чтобы ваш второй тег SELECT отображал второй поле INPUT, когда выбрано «Other1», как и первое для «Другого».

Вы действительно близко, но ваш Javascript нуждается в некоторой корректировке. В настоящее время вы тестируете измененный элемент «Другой», а затем изменяете отображение для объекта o, который является ссылкой на элемент с идентификатором «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> 

Это расширит ту же функциональность от первой ВЫБРАТЬ ко второму.