Evento onchange Javascript

0
194

Muy buenas gente vamos al lío, hoy traigo el evento onchange. Fácil de utilizar y agradable a la vista. ¿Te gustaría que al cambiar de opción en un select se ejecute una función? Pilla sitio entonces y atento que no lo repito.

Vamos a dividir el código en 3 partes para comprenderlo.

Parte 1: Select de toda la vida de dios, con 3 opciones. Si lo pones así queda muy simplón la verdad. Pero vamos a meterle un poco de vida. Le añadimos el evento onchange con la intención de que se ejecute la función “evento” cada vez que cambiamos de opción.

<!-- PARTE 1-->

<select id="pruebas" onchange="evento()" >
 <option value="opcion1">opcion1</option>
 <option value="opcion2">opcion2</option>
 <option value="opcion3">opcion3</option>
</select>

<!-- PARTE 1-->

Parte 2: Esta etiqueta la usamos para mostrar el resultado final. El objetivo será recoger el valor del select y ponerlo en este span cuando se ejecute la función.

<!-- PARTE 2-->
<span id="mostrar"></span>
<!-- PARTE 2-->

 

Parte 3: La parte del Javascript.

La primera línea del código de Javascript recoge el contenido de la opción seleccionada. ¿Como sabe de donde tiene que recoger la información? Con la id que hemos puesto en el select llamada “pruebas”. Después de recoger el valor de la opción la asigna a una variable llamada campotexto

La segunda Línea Tiene como objetivo mostrar la opción seleccionada (campotexto) en el elemento html que tenga la id “mostrar”.  Siendo campotexto la variable que contiene el texto de la opción.

<!-- PARTE 3-->
<script type="text/javascript">


function evento(){

 campotexto = document.getElementById("pruebas").value;
 document.getElementById("mostrar").innerHTML = "Opcion seleccionada: "+campotexto;

}

</script>
<!-- PARTE 3-->

 

El código completo estaría aquí. Para verlo funcionar pulsa aquí

<h1>Javascript</h1>

<!-- PARTE 1-->
<select id="pruebas" onchange="evento()" >
 <option value="opcion1">opcion1</option>
 <option value="opcion2">opcion2</option>
 <option value="opcion3">opcion3</option>
</select>
<!-- PARTE 1-->



<!-- PARTE 2-->
<span id="mostrar"></span>
<!-- PARTE 2-->


<!-- PARTE 3-->
<script type="text/javascript">


function evento(){

 campotexto = document.getElementById("pruebas").value;
 document.getElementById("mostrar").innerHTML = "Opcion seleccionada: "+campotexto;

}

</script>
<!-- PARTE 3-->

Dejar respuesta

Please enter your comment!
Please enter your name here