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>
Aún no hay comentarios
¡Sea el primero en comentar!
