event - Javascript-onchange dentro de<option>
select onchange jquery (3)
La respuesta de Tom es elegante, y cuidadosamente separa el JS del marcado HTML. Como se mencionó, incluso podría moverse a un archivo externo. Sin embargo, agrega bastante "tonterías" al código, como múltiples asignaciones de funciones anónimas, etc.
Si desea una solución rápida, puede ponerlo todo en onchange () dentro de la etiqueta de selección también. Elija el que vea más en forma.
<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>
Tengo una forma relativamente simple que hace una variedad de preguntas. Una de esas preguntas se responde a través de un cuadro de selección. Lo que me gustaría hacer es si la persona selecciona una opción en particular, se les solicita más información.
Con la ayuda de algunos tutoriales en línea, he conseguido que el Javascript muestre un div oculto sin problemas. Mi problema es que parece que no puedo localizar el evento en la etiqueta Opción, solo la etiqueta Seleccionar que realmente no sirve.
En este momento el código se ve como (código simplificado para ayudar a la claridad):
<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>
Lo que me gustaría es que si eligen "Otra razón", entonces muestre el div. No estoy seguro de cómo lograr esto si onChange no se puede utilizar con la etiqueta de opción.
Cualquier asistencia muy apreciada :)
Nota: Completo principiante cuando se trata de Javascript, ¡me disculpo si esto es estúpidamente simple de lograr!
Después de leer la gran respuesta de Tom, me di cuenta de que si alguna vez añadía otras opciones a mi formulario, se rompería. En mi ejemplo, esto es bastante probable, porque las opciones se pueden agregar / eliminar usando un panel de administración php.
Hice un poco de lectura y lo alteré muy levemente para que en lugar de usar selectedIndex use valor en su lugar.
<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>
Espero que esto ayude a alguien más en el futuro!
Configure el onchange eventos onchange para el cuadro de selección para ver el índice seleccionado actualmente. Si el índice seleccionado es el de la opción ''Otra razón'', entonces muestre el mensaje; de lo contrario, oculta la división.
<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>
Personalmente, daría un paso más y movería el JavaScript en un archivo externo y simplemente lo incluiría en el encabezado de la página; sin embargo, para todos los efectos, esto debería ayudar a responder su pregunta.