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>
