Javascript - обмен в пределах <option> - PullRequest
Новая
       16

Javascript - обмен в пределах <option>

11 голосов
/ 15 декабря 2008

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

С помощью нескольких онлайн-руководств мне удалось заставить 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>

Что бы я хотел, если бы они выбрали «Другая причина», то тогда отобразился бы div. Не уверен, как мне этого добиться, если onChange нельзя использовать с тегом Option!

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

Примечание: для начинающих, когда дело доходит до Javascript, я прошу прощения, если это глупо просто достичь!

Ответы [ 3 ]

17 голосов
/ 15 декабря 2008

Установите обработчик события 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 во внешний файл и просто включил его в заголовок страницы; тем не менее, для всех целей и задач это должно помочь ответить на ваш вопрос.

8 голосов
/ 15 декабря 2008

Прочитав замечательный ответ Тома, я понял, что, если я когда-нибудь добавлю другие варианты в мою форму, она сломается. В моем примере это вполне вероятно, потому что параметры могут быть добавлены / удалены с помощью панели администратора 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>

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

5 голосов
/ 15 декабря 2008

Ответ Тома элегантен и аккуратно убирает 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...