Uno de los elementos más utilizados de un
formulario es el menú de opciones, el menú de opciones contiene elementos, que pueden
ser personalizados, para crear una lista despegable. La forma HTML para el menú es:
<form
name="forma">
<select name="menu" size="1">
<option value="uno">Opción 1</option>
<option value="dos">Opción 2</option>
</select>
</form> |
Lo que va entre <option>
</option> es cada una las etiquetas que aparecerán en la lista.
selectedIndex, cuando tenemos un menú de opciones y seleccionamos una
opción, es posible saber por medio de Javascript cuál fue la opción seleccionada,
también podemos modificar la opción seleccionada sin que el usuario tenga que hacerlo.
El valor de selectedIndex, refleja cuál es el número de la opción seleccionada.
Si lo que queremos es referirnos a un determinado elemento tenemos
que poner el número de este elemento entre corchetes [ ]. Ejemplo para referirnos al
valor del elemento #1 (comienza por 0) del menú de arriba.
document.forma.menu[1].value
Si observas, inmediatamente después del nombre del menú colocamos
los corchetes con el número del elemento al que nos queremos referir,
Es muy común observar menú de opciones y un botón y se supone que
al seleccionar algún elemento y dar click en el botón de junto nuestro navegador irá a
la página seleccionada, para lograr esto tenemos que obtener el número de elemento
seleccionado del menú y además su valor, veamos un ejemplo para construir nuestro propio
menú de direcciones. Ejemplo:
El código para el menú y el botón de junto es:
<form
name="hola">
<select name="menu" size="1">
<option value="http://www.paratodos.8m.net/index.htm">
Inicio
</option>
<option value="fsguestbook.html">
Libro de visitas
</option>
</select>
<input type="button" value="Click para ir"
onclick="vamos( )"></p>
</form> |
Observa que se incluyo la función vamos( ),
esta se activará con el evento onclick sobre el botón. El código para la función es:
<script language="javascript"><!--
function vamos( ){
window.location = document.hola.menu[ document.hola.menu.selectedIndex ].value
}
-->
</script> |
La parte que está de color rojo sirve
para indicar el numero de opción que el usuario ha elegido (selectedIndex),
esta parte va entre [ ] por que el valor que resultará
será un número, entonces document.hola.menu[2].value nos dará el valor de la
opción 1. Cuando escribas el código para el menú, recuerda que el valor de cada opción
debe ser la dirección de la página a la cuál será llevado el usuario. y entre <option> </option> va la etiqueta (o sea el texto que
se mostrará en el menú.
window.location se utiliza para decir cual será la ubicación
(location) que tendrá la ventana (window), es decir,
la nueva dirección.
