jueves, 23 de octubre de 2008

Utilizando select en javascript.

Para esta primera ocasión les traigo un código sencillo para que puedan ocupar formularios en web.

En este caso presente el uso de un select en el cual capturaremos el sexo que necesites en una variable para luego mandarlo a imprimir en un div.

A continuación explicare los pasos para crearlo.
Pueden poner al html el nombre que quieran.

<html>

<body>

Parte 1: Elije tu sexo.

<br><br>

<select id="com1" onChange="cambio(this, 1)">

<option> </option>

<option>Hombre</option>

<option>Mujer</option>

</select>

<br>

<br>

<div id="div1"></div>

<br><br>

<input type="reset" name="limpiar" id="limpiar" value="Limpiar" onClick="borrar()">

</body>

<script language="javascript">

var opc=0;

function borrar()

{

var opc=0;

com1.selected = 0;

div1.innerHTML="";

com1.selectedIndex=0;

}

function cambio(com, num) {

var opc = com.selectedIndex;

if(opc==1)

{div1.innerHTML="Eres hombre"}

else

{div1.innerHTML="Eres mujer"}

}

</script>

</html>


Lo primero sera observar que el select consiste en tres campos, uno donde no ay nada para empezar y otras dos donde están los sexos posibles ocuparemos entonces el evento onChange="cambio(this, 1)" para cuando el usuario cambie de opción, observar que en el this capturaremos el nombre del select muy útil cuando se tienen varios, después recurriremos a la función cambio.

En la cual capturamos el valor que trae que puede ser 0 1 ó 2 dependiendo de la selección se dispone a ver con que rellenar el div por eso ocuparemos el innerHTML que nos servirá para poner lo que queramos adentro del div.

Por ultimo limpiaremos para dejar como nuevo con el botón limpiar que manda a traer la función borrar; que es el que vuelve a poner al select en la posición de inicio en 0 y borra lo que contenga el div.

como verán es muy sencillo pero útil cuando se empieza a trabajar con formularios.

No hay comentarios.: