Ejemplos de lista desplegable (combobox)


Ejemplo 1: Una sola lista.

Selecciona el día de la siguiente lista:

El formato de las fechas del la lista es:
Ddd, Nn Mmm Aa
Tres letras para el día de la semana, un espacio, dos dígitos para el día del mes, un espacio, tres letras para el mes, un espacio y dos cifras para el año.

La definición de la lista sería:

<select name="dias" onChange="linkToFecha()">
<
option>Dom, 22 Dic 96</option>

La función que "verifica" o toma los datos, tendrá en cuenta las posiciones para hacer un link a una página que tendrá el formato: tips_ddMmmaa.htm

Este es el listado de la función: linkToFecha()

function linkToFecha() {
    //Puntero a la selección actual
    p=document.ejemplo1.dias.selectedIndex
    //texto contenido en la selección actual
    eldia=document.ejemplo1.dias.options[p].text
    //Toma el día (en número), el mes y el año
    fichero_dias="tip_"+eldia.substring(5,7)+eldia.substring(8,11)+eldia.substring(12,14)
    //Muestra el fichero resultante
    alert("El fichero sería: '"+ fichero_dias+"'")

    //Hacer el enlace a la página o sección adecuada.

}

Ejemplo 2: Combinar la selección de 2 listas.

Selecciona el apartado de cada una de estas listas:
Apartado: Sección:

La función de enlace con otra página o sección en la misma, tomará el valor asignado a value de la selección de cada lista y formará una cadena con el siguiente formato:
ej_apartado_seccion.htm
Hay que tener precaución al modificar la lista con FrontPage, ya que si no está marcada la casilla de Especificar Valor, al modificarla, se asigna a value el texto mostrado, espero que sea un fallo de la versión beta.
NOTA al revisar el funcionamiento de esta página: El fallo persiste, incluso cuando se hace con "cuidadín", así que aunque en el ejemplo esté con value, se debería poner text como en el ejemplo anterior.

Este es el listado de la función linkToTips()

function linkToTips() {
    s1=document.ejemplo2.apartados.selectedIndex
    s2=document.ejemplo2.secciones.selectedIndex
    n1=document.ejemplo2.apartados.options[s1].text
    n2=document.ejemplo2.secciones.options[s2].text
    fichero_tips="ej_" + n1.substring(0,3) + "_" + n2.substring(0,3)
    alert("El fichero sería: '"+ fichero_tips+"'")

    //Hacer el enlace a la página o sección adecuada.
    //Aunque no funciona como debería
    window.location.hash="#"+fichero_tips
    //si fuese un fichero htm, hacer esto otro:
    //document.location.href=fichero_tips + ".htm"
}

Espero que estén suficientemente claros estos ejemplos y sobre todo que os sea de utilidad.


 

Estas secciones son sólo "enlaces" para el segundo ejemplo:

 


 

Aquí se accede al seleccionar Visual Basic y Programas


 

Aquí se accede al seleccionar Visual Basic y Trucos


 

Aquí se accede al seleccionar Visual Basic y Enlaces


 

 

Aquí se accede al seleccionar cualquiera de las otras opciones


[Volver al ejemplo 2 | Volver al inicio de esta página]


ir al índice