Ejemplos de Listas Desplegables (Combos)

Con explicación y el código


Primer ejemplo:

Selecciona una de estas opciones y pulsa el botón


Segundo ejemplo:

¿Cual es la segunda letra?


Tercer ejemplo:

¿De que color es el logo del Guille?


Cuarto ejemplo:

Selecciona la dirección a la que quieres ir y pulsa el botón
(sólo es una demo y no te llevará a ningún sitio)


Quinto ejemplo:

Pulsa la dirección a la que quieres ir...
(sólo es una demo y no te llevará a ningún sitio)


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 !


ir al índice principal