Javascript - onchange dentro de <option>

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.Javascript - onchange dentro de <option>

Con la ayuda de algunos tutoriales en línea, he conseguido que el Javascript muestre un div oculto muy bien. 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 el momento en que el código es el siguiente (código simplificado para facilitar la comprensión!):

<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 si así lo desean "tiene más razón" que a continuación, muestra el div. No estoy seguro de cómo lograr esto si onChange no se puede utilizar con la etiqueta de opción.

Cualquier ayuda muy apreciada :)

Nota: principiante cuando se trata de Javascript, me disculpo si esto es estúpidamente fácil de lograr!

Fuente

2008-12-15 suitedupgeek

Configure el controlador de eventos onchange para que el cuadro de selección mire 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>

En lo personal, me gustaría tomar un paso más allá y mover el JavaScript en un archivo externo y justo lo incluye en el encabezado de la página; sin embargo, para todos los efectos, esto debería ayudar a responder su pregunta.

Fuente

2008-12-15 12:34:32 Tom

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ó ligeramente de manera que en lugar de utilizar selectedIndex se utiliza valor 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!

Fuente

2008-12-15 13:00:48 suitedupgeek

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 "sin sentido" al código, como asignaciones múltiples de funciones anónimas, etc.

Si desea una solución rápida, puede ponerlo todo en el cambio() 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>

Fuente

2008-12-15 13:03:20 Tuminoid

Personalmente prefiero configurar una clase en lugar de una propiedad de estilo; posiblemente incluso de un ancestro del div (que podría ser un contenedor común tanto para el menú desplegable como para el div; eso le permite usar el mismo código más de una vez) – bart

Acabo de arreglar el cambio, el html fue copiado de la pregunta. – Tuminoid

La propiedad de estilo solo fue para salvarme copiando también el archivo CSS, como se mencionó anteriormente, para mayor claridad. – suitedupgeek

Javascript - onchange dentro de <option>

Respuesta

Cuestiones relacionadas