Control: Listas Desplegables

Las listas son un elemento con el que puede interactuar el usuario.

Primero se debe construir el elemento como siempre, añadiendo en la etiqueta <select> el evento change. Y en cada etiqueta <option> añadir el atributo value para poder identificar cual de los elementos ha sido elegido.

Ejemplo:

Curso de JavaScript <!– @page { size: 21cm 29.7cm; margin: 2cm } P { margin-bottom: 0.21cm } –>

El siguiente ejemplo muestra una lista desplegable o lista (el modo de trabajo es el mismo). De la lista desplegable elegimos un destino que nos mostrará información del destino elegido. Más adelante trabajaremos con enlaces.

Curso de JavaScript <!– @page { size: 21cm 29.7cm; margin: 2cm } P { margin-bottom: 0.21cm } –>

<html>
<head>
<script>
function viaje()
{
var valor=probar.destino.value;
alert(valor);
alert(probar.destino.value);
var cadena;
switch(valor)
{
case “1”:
cadena=”Quito. Precio: 27.900″;

break;
case “2”:
cadena=”Moscu. Precio: 17.000″;

break;
case “3”:
cadena=”Paris. Precio: 57.900″;
break;
case “4”:
cadena=”Roma. Precio: 17.900″;
break;
}
alert(cadena);
}
</script>
</head>
<body>
<form name = probar>
<select size=”1″ name=”destino” onChange=viaje();>
<option value=”1″>Quito</option>
<option value=”2″>Moscu</option>
<option value=”3″>Paris</option>
<option value=”4″>Roma</option>
</select>
</form>
</body>
</html>

Anuncios

Dejar un comentario

Be the first to comment!

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

Trackback URI

A %d blogueros les gusta esto: