Ejemplos de Listas Desplegables (Combos)
Con explicación y el código
Primer ejemplo:
Segundo ejemplo:
Tercer ejemplo:
Cuarto ejemplo:
Quinto ejemplo:
La explicación y listados (código) de los ejemplos y los cambios a realizar:
El listado de las dos funciones usadas:
<script languaje="JavaScript">
<!--
function tSel(pLista, modo){
i=pLista.selectedIndex
if(modo){
if(pLista.options[i].value=="SI")
alert("Correcto");
else
alert("Esa no es la opción correcta.");
}else{
alert("El Contenido de la opción: " + pLista.options[i].text +
"\nValor: "+pLista.options[i].value);
}
}
function tSel2(pLista, pValor){
i=pLista.selectedIndex
if(pValor==i)
alert("Correcto");
else
alert("Esa no es la opción correcta.");
}
//-->
</script>
El primer ejemplo muestra una ventana emergente (alerta, msgbox) con el texto de la opción seleccionada.
<form method="POST">
<p>Selecciona una de estas opciones y pulsa el botón <select
name="D1" size="5">
<option> Primera </option>
<option> Segunda </option>
<option> Tercera </option>
<option> Cuarta </option>
</select> <input type="button" value="Seleccionar"
onclick="alert('La opción seleccionada es: '+D1.options[D1.selectedIndex].text)"> </p>
</form>
El segundo ejemplo muestra una lista (todos muestran una lista...) y pregunta que selecciones uno de ellos, en el propio listado se indica las solución a la pregunta, para que la rutina (función) sepa si la selección hecha es la correcta o no; esto se logra con el value de la opción, la respuesta correcta es "SI" y cualquier otro valor (incluso ninguno), significa que no es la correcta.
<form method="POST">
<p>¿Cual es la segunda letra? <select name="D2" size="3">
<option value="NO"> A </option>
<option value="SI"> B </option>
<option> C </option>
</select> <input type="button" value="Seleccionar"
onclick="tSel(D2, 1)"> </p>
</form>
Los prámetros pasados a la función indican el List y un valor que será 1 (uno) para evaluar el resultado y 0 (cero) para simplemente mostrar información del elemento seleccionado.
El tercero es una variante del segundo, pero los parámetros pasados a la función indican cual es el valor correcto, debes tener en cuenta que empiezan a contar desde CERO, por tanto el 1 significará que es la segunda opción, etc.
<form method="POST">
<p>¿De que color es el logo del Guille? <select name="lstG"
size="3">
<option> Rojo </option>
<option> Verde </option>
<option> Azul </option>
</select> <input type="button" value="Seleccionar"
onclick="tSel2(lstG, 2)"> </p>
</form>
En este caso los parámetros que espera la función son: la lista en la que se hace la selección y el número del elemento que es el que tiene la solución correcta. Debes recordar (como ya he indicado) que empieza a contar desde CERO.
En los ejemplos 4 y 5 lo que se muestra son unas direcciones de internet (o lo que quieras poner) y sirve para "ir" al sitio seleccionado, en el primer caso, después de pulsar el botón "GO" y en el segundo sólo al pulsar en una de las opciones. Para todos los casos, si indicas un valor 1 en SIZE quiere decir que usarás un Combo y si indicas el número elementos a mostrar se hará al estilo de una lista (en caso de que haya más opciones te podrás desplazar por la lista hasta seleccionar la que quieres)
<form method="POST">
<p>Selecciona la dirección a la que quieres ir y pulsa el
botón<br>
(sólo es una demo y no te llevará a ningún sitio) <select
name="D3" size="1">
<option value="http://www.wcostasol.es/guiller/"> Página del Guille </option>
<option selected
value="http://www.wcostasol.es/vbonline/"> VB Online en Castellano </option>
<option value="http://www.wcostasol.es/comsur/"> Comunicaciones Sur </option>
<option value="http://www.wcostasol.es/"> Web Costasol </option>
<option value="http://www.comsur.net/"> El NUEVO Web de ComSur </option>
<option value="http://www.microsoft.com/"> Microsoft </option>
</select> <input type="button" value=" Go " onclick="tSel(D3, 0)"> </p>
</form>
En este ejemplo la llamada a la función es sólo a título de demostración, pero en un caso real sería haciendo lo siguiente:
<input type="button" value=" Go " onclick="location=D3.options[D3.selectedIndex].value">
<form method="POST">
<p>Pulsa la dirección a la que quieres ir...<br>
(sólo es una demo y no te llevará a ningún sitio) <select
name="D5" size="3" onchange="tSel(D5, 0)">
<option value="http://www.wcostasol.es/guiller/"> Página del Guille </option>
<option value="http://www.wcostasol.es/vbonline/"> VB Online en Castellano </option>
<option value="http://www.wcostasol.es/comsur/"> Comunicaciones Sur </option>
<option value="http://www.wcostasol.es/"> Web Costasol </option>
<option value="http://www.comsur.net/"> El NUEVO Web de ComSur </option>
<option value="http://www.microsoft.com/"> Microsoft </option>
</select> </p>
</form>
Aquí también deberás cambiar la llamada a la función por la acción de ir al lugar seleccionado:
<select name="D5" size="3" onchange="location=D5.options[D5.selectedIndex].value">
NOTA: Fijate que
en el cuarto ejemplo, la segunda opción es la seleccionada por
defecto.
En el caso 5º esto "mal-funcionaría" ya que se va a
un lugar determinado al cambiar de selección, así que no se
iría a la que esté seleccionada "a priori", ¡
porque no se cambia de selección !