Javascript - onchange в <option>

У меня относительно простая форма, которая задает множество вопросов. Один из этих вопросов отвечает через Select Box. Я хотел бы сделать это, если человек выбирает конкретный вариант, им предлагается дополнительная информация.

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

В настоящий момент код выглядит (код упрощен, чтобы помочь ясности!):

<select id="transfer_reason" name="transfer_reason onChange="javascript:showDiv('otherdetail');">
<option value="x">Reason 1</option>
<option value="y">Reason 2</option>
<option value="other">Other Reason</option>
</select>

<div id="otherdetail" style="display: none;">More Detail Here Please</div>

Что бы я хотел, если они выбирают "Other Reason", тогда он отображает div. Не уверен, как я это достигаю, если onChange нельзя использовать с тегом Option!

Любая помощь очень ценится:)

Примечание: полный новичок, когда дело доходит до Javascript, я приношу свои извинения, если это глупо просто добиться!

Ответ 1

Установите обработчик события onchange для окна выбора, чтобы посмотреть текущий выбранный индекс. Если выбранным индексом является параметр "Другой причины", тогда отобразите сообщение; в противном случае скрыть разделение.

 <html>
 <head>
  <script type="text/javascript">
    window.onload = function() {
        var eSelect = document.getElementById('transfer_reason');
        var optOtherReason = document.getElementById('otherdetail');
        eSelect.onchange = function() {
            if(eSelect.selectedIndex === 2) {
                optOtherReason.style.display = 'block';
            } else {
                optOtherReason.style.display = 'none';
            }
        }
    }
  </script>
 </head>
 <body>
    <select id="transfer_reason" name="transfer_reason">
        <option value="x">Reason 1</option>
        <option value="y">Reason 2</option>
        <option value="other">Other Reason</option>
    </select>
    <div id="otherdetail" style="display: none;">More Detail Here Please</div>
</body>
</html>

Лично я бы сделал еще один шаг и переместил JavaScript во внешний файл и просто включил его в заголовок страницы; однако, для всех целей и целей, это должно помочь ответить на ваш вопрос.

Ответ 2

Прочитав большой ответ Том, я понял, что если я когда-нибудь добавлю другие варианты в мою форму, он сломается. В моем примере это вполне вероятно, потому что параметры могут быть добавлены/удалены с помощью панели администрирования php.

Я немного прочитал и немного изменил его, чтобы вместо использования selectedIndex вместо этого он использовал значение.

<script type="text/javascript">
window.onload = function() {
    var eSelect = document.getElementById('transfer_reason');
    var optOtherReason = document.getElementById('otherdetail');
    eSelect.onchange = function() {
        if(eSelect.value === "Other") {
            optOtherReason.style.display = 'block';
        } else {
            optOtherReason.style.display = 'none';
        }
     }
  }
  </script>

Надеюсь, это поможет кому-то еще в будущем!

Ответ 3

Ответ на Tom элегантен и аккуратно помещает JS из разметки HTML. Как уже упоминалось, его можно даже перенести во внешний файл. Однако он добавляет в код довольно много "бессмыслицы", например, множество анонимных назначений функций и т.д.

Если вам нужно быстрое решение, вы можете поместить его все в onchange() внутри тега select. Выберите тот, который вы видите более подходящим.

<select id="transfer_reason" name="transfer_reason" onchange="document.getElementById('otherdetail').style.display = (this.selectedIndex === 2) ? 'block' : 'none';">
    <option value="x">Reason 1</option>
    <option value="y">Reason 2</option>
    <option value="other">Other Reason</option>
</select>
<div id="otherdetail" style="display: none;">More Detail Here Please</div>