Два раскрывающихся меню, когда в раскрывающемся меню выбрано «другое»

Мне нужно два раскрывающихся меню, когда «другое выбрано из любого из них», появляется текстовое поле, позволяющее пользователю вводить свой ответ.Два раскрывающихся меню, когда в раскрывающемся меню выбрано «другое»

Я могу создать оба выпадающего меню и получить один из них, чтобы открыть текстовое поле, но я не могу заставить обоих выполнить одно и то же действие. Я пробовал много вариантов и не могу заставить его работать. кто-нибудь, пожалуйста, помогите.

Спасибо

<html> 
<head> 

<script type="text/javascript"> 
window.onload = function() { 
    var eSelect = document.getElementById('association'); 
    var optOtherReason = document.getElementById('association_detail'); 
    eSelect.onchange = function() { 
     if(eSelect.selectedIndex === 5) { 
      optOtherReason.style.display = 'block'; 
     } else { 
      optOtherReason.style.display = 'none'; 
     } 
    } 
} 
</script> 
</head> 
<body> 
<p> 
    <label>Stakeholder association (How you are affiliated with EMWIN):</label> 
    <select id = "association" name="association" > 
    <option value="na">Select:</option> 
    <option value="AR">Academic Research</option> 
    <option value="EM">Emergency Management</option> 
    <option value="EV">Equipment Vender</option> 
    <option value="RB">Re-broadcast</option> 
    <option value="Other">Other</option> 
    </select> 

    </p> 
    <div id="association_detail" style="display: none;"> 
    <input id="namesignup" name="namesignup" required="required" type="text" placeholder="How you are affiliated with EMWIN" /> 
    </div> 

    <p> 
    <label>Stakeholder association (How you are affiliated with EMWIN):</label> 
    <select id = "select_use" name="select_use" > 
    <option value="na">Select:</option> 
    <option value="sat">Satellite</option> 
    <option value="int">Internet</option> 
    <option value="vhf">VHF Radio Rebroadcast</option> 
    <option value="Other">Other</option> 
    </select> 
    </p> 
    <div id="Use" style="display: none;"> 

    <input id="namesignup" name="namesignup" required="required" type="text" placeholder="How you are affiliated with EMWIN" /> 
    </div> 
    </body> 
    </html>

источник

2016-03-18 wx_girl

несколько вопросов, я не ледяные:

Ваши «другие» текстовые поля имеют одинаковый идентификатор/имя; это не соответствует стандарту HTML. Вы должны убедиться, что каждый элемент имеет уникальный идентификатор.
Вы слушаете только eSelect изменений; если вы хотите также переключить видимость div Use, вам нужно будет прослушать, когда изменится select-use (т. е. вам нужно построить другой обработчик).

источник

2016-03-18 15:02:00

У меня было, но он не работал, поэтому я не добавил его. Я изменил второй так много раз, что не уверен, что будет считаться правильным. –

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

Вам нужно будет получить второй блок выбора (id = "select_use") и добавить к нему еще один обработчик обмена. В этом втором обработчике onchange вам нужно будет выбрать второе текстовое поле (id = «use»), чтобы показать/скрыть его.

Вот обновленная версия кода:

var eSelect = document.getElementById('association'); 
    var eSelect2 = document.getElementById('select_use'); 
    var optOtherReason = document.getElementById('association_detail'); 
    var optOtherReason2 = document.getElementById('Use'); 

    eSelect.onchange = function() { 
     if(this.options[this.selectedIndex].value === 'Other') { 
     optOtherReason.style.display = 'block'; 
     } else { 
     optOtherReason.style.display = 'none'; 
     } 
    } 
    eSelect2.onchange = function() { 
     if(this.options[this.selectedIndex].value === 'Other') { 
     optOtherReason2.style.display = 'block'; 
     } else { 
     optOtherReason2.style.display = 'none'; 
     } 
    }

Попробуйте здесь: https://jsfiddle.net/ve9fg0tc/2/

Также в вашем OnChange обработчиком, было бы лучше, чтобы показать/скрыть основе ваше текстовое поле по выбранному значению («другое»), а не по индексу. Это связано с тем, что в будущем вы можете добавить/удалить больше элементов в своем меню, чтобы индекс изменился, и состояние больше не будет работать.

источник

2016-03-18 15:15:42 Tinlun

Спасибо, что у меня это получилось! Я очень ценю это! –

Добро пожаловать, рад, что я могу помочь! Это мой первый ответ на stackoverflow! – Tinlun

Два раскрывающихся меню, когда в раскрывающемся меню выбрано «другое»

ответ

Смежные вопросы