3 min de lectura

Nota: Si lo que estas buscando es como realizar menús en HTML por medio de listas, entonces ve a este enlace.

La etiqueta <select> para crear listas desplegables HTML

La etiqueta <select> sirve para crear listas desplegables html (que por cierto no obligatoriamente tiene que ser desplegable), y cada uno de los elementos de esa lista son especificados por las etiquetas OPTION u OPTGROUP dentro de ella.

Los atributos de la etiqueta select son:

  • name: Representa el nombre asociado con la casilla de texto, que permite su identificación en el par nombre/valor.
  • disabled: Crea un lista desactivada, que aparece atenuada
  • size: Si un elemento SELECT se presenta como una lista con desplazamiento (“scrolled list box”), este atributo especifica el número de filas de la lista que deberían ser visibles al mismo tiempo.No es preciso que los agentes
    visuales presenten un elemento SELECT como una lista (“list box”); pueden usar cualquier otro mecanismo, como por ejemplo un menú desplegable (“drop-down menu”).
  • multiple: Permite al usuario seleccionar varios campos de la lista

La etiqueta <option> para cada elemento de las listas desplegables HTML

 

Por cada opción a desplegar en la lista se utiliza la etiqueta <option> la cual puede tener como propiedades selected y value además de cualquiera de los atributos inherentes de los objetos html, que puedes revisar en esta entrada.

Veamos pues un sencillo ejemplo de una lista desplegable con sus elementos.

Esto se verá así:

Como puedes ver los values no necesariamente son texto, y cuando son números, no necesariamente van en orden.
De hecho, debes siempre recordar que el value será el dato que se enviará cuando el formulario sea enviado.

En el ejemplo anterior, los sistemas operativos windows y linux estan revueltos, pero esto puede solucionarse.
Con la etiqueta <optgroup> se pueden crear grupos de opciones para así clasificarlos:

El código anterior mostrará algo así:

El atributo size para que las listas desplegables HTML sean fijas y no desplegables

Si lo que se desea es que esta no sea una lista desplegable, entonces se genera un código indicando el size de la lista:

Y eso mostraría esto:

Compartir
Licenciada en Informática con Maestría en Tecnologías de la Información. Docente por convicción con trece años de experiencia, desarrolladora desde hace nueve años trabajando actualmente con desarrollo WEB para alta disponibilidad, además de ser consultor independiente y capacitador. Participe del movimiento del software libre como fiel apasionada, reconocida por su actividad en la comunidad y su participación en la inclusión.

68 COMENTARIOS

  1. Que tal Itzahara,

    Para lograr que ocurra un “evento” cuando eliges una opción del select es necesario utilizar código de JS.

    Harías un evento de “onchange” obtienes el dato seleccionado y por medio de una condicional decides que hacer.

  2. Hola!
    Cómo haces para que al dar click en el select la lista aparezca hacia abajo? copie el codigo y al dar click para q la lista se despliegue la lista aparece encima.. no se si me explique..

    • Que tal Fanny, la posición en la que aparecerá tu lista desplegable depende mucho de tu navegador, puedes hacer distintas pruebas en Chrome, Firefox, Safari, IE y Opera y notarás pequeñas diferencias al respecto.

      Por ejemplo, en mi caso cambié el tema (el CSS) de mi sitio y ahora la lista aparece encima en lugar de hacia abajo.

  3. Hola Michelle, tengo una pregunta respecto a los listados desplegables… me gustaría que, al hacer clic desde otra página, se active una opción de la lista u otra. ¿Es posible? ¿cómo se haría? Gracias!

    • Patricia,
      Definir algún elemento de la lista como seleccionado se logra poniendo el atributo “selected” en el option deseado.

      Sin embargo el lograr que eso suceda en base a un evento en otra página representa:
      1. Programación con JS para poder escuchar el evento
      2. Enviar la información de una página a otra, recuerda que la web no tiene memoria entre cambios de páginas, y para eso se usan métodos como POST o GET

  4. Hola, estoy buscando algo así pero mas sencillo para poner en mi web, por ejemplo en el contenido de un articulo colocar esa casilla desplegable en forma vertical que pusiste vos, donde los usuarios puedan elegir varias opciones (por ejemplo archivos para descargar), sirve ese mismo código?

    • Si lo que deseas es una lista desplegable con enlaces lo que te recomiendo es utilizar javascript, para que cuando se detecte el cambio de lo elegido se lance un evento que inicie la descarga del archivo.

  5. Grasias por el aporte me ayudo muchas gracias::!!!!!!
    y una pregunta como puedo hacer que la seleccion interactue con un campo de texto..!!! saludos

    • Con javascript puedes “escuchar” el onChange del select y encontes escribir en el input el texto que desees.
      Eso es programación, te recomiendo que revises artículos de eventos con JS

  6. Felicidades, Michelle, por la información, es muy interesante y útil. ¿Pero cómo puedo hacer que se combien dos listas desplegables? Me explico, en una lista, por ejemplo, tengo una relación de variables económicas (población, desempleo, nacimientos, etc.) y en una segunda un corte geográfico para que puedan escoger (datgos nacionales, de comunidades autónomas, datos provinciales, etc.) y, una vez escogido el cruce, remitirle a la página web correspondiente donde están los datos solicitados. No sé si será complicado escribir el código (imagino que en javascript), pero de cualquier modo te estoy muy agradecido por tu página y por si puedes lograr ayudarme.

  7. Hola y muchas gracias por tu aportacion. Una cosa, si ahora selecciono uno de los datos de la lista desplegable y quiero que se me guarde en una base de datos mysql workbench, como lo hago? mil gracias!

  8. Hola, me gustaría saber como coloco en una página varias listas (desplegables o no) y me dirija a una página (con botón o automáticamente).
    Por ejemplo: “Seleccione ciudad, seleccione calle… ” y me dirija a una web concreta dependiendo de la elección.
    Gracias.

    • Tendrías que agregar un evento con JS, al tener un cambio el select.
      De este modo con JS lees el dato elegido, y en base a eso, haces un redirect para que se lance la descarga del archivo.

  9. Excelente aporte, felicidades!!
    Quierque de una lista “select” al darle clic a un dato de esta, se descargue un archivo pdf, me puedes orientar? gracias

    • Tendrías que agregar un evento con JS, al tener un cambio el select.
      De este modo con JS lees el dato elegido, y en base a eso, haces un redirect para que se lance la descarga del archivo.

  10. Michelle, gran explicación, gracias por esto. Pero, por lo general, cuando la gente te pregunta cómo agregar un enlace a las opciones, una respuesta como “crea código en JS para realizar un evento” es lo mismo que no decir nada.

    Sería ideal ser un poco más explicativa.

    Saludos.

  11. Cordial saludo, me ha parecido muy clara y explicita tu explicacion, Gracias!!.
    Quisiera preguntarte, como implemento una lista desplegable, como la que se despliega en el cuadro de google al hacer la busqueda.
    Ya he logrado mediante código en el servidor y ajax, que se carguen datos de una consulta, en un datalist, pero la falla es que el data list se carga después de presionar la tecla y no he logrado desplegarlo luego por codigo, por eso me gustaria intentar como en google, no se si se pueda .
    Gracias por tu respuesta.

  12. Hola Michele.
    Una duda hice una lista desplegable, P/E seleccionamos windows 7 y a la hora de actualizar un campo el campo de windows 7 se modifica, hay alguna forma de hacer que ese campo se quede estatico sinque se afecte al actualizar un campo de la misma tabla

  13. Hola Michelle, podrias postear un ejemplo sobre esto? porfa

    ” se puede poner un enlace a la opción es que no puedo no se como darle clic a la opción y que valla a otra pagina.”

    Para lograr que ocurra un “evento” cuando eliges una opción del select es necesario utilizar código de JS.
    Harías un evento de “onchange” obtienes el dato seleccionado y por medio de una condicional decides que hacer.

  14. Hola estoy haciendo un formulario y quisiera saber si tengo una lista desplegable llamada desde uns bd y le doy value = id(bd) como puedo tomar ese valor elegido para realizar una busqueda en una tabla diferente

  15. hola buenas tardes…. deseo que en mi lista desplegable pueda agregar una nueva opcion… osea que al usuario al visualizar la lista sino aparece una opcion se pueda agregar directamente alli

    • Que tal Luzy, esto va mas allá que solamente poner una etiqueta de html.
      Deberás además poner un botón y generarle una acción a este botón para que modifique el DOM y agregue la nueva opción que deseas:

      Además deberemos poner la función con jQuery que haga la opción de agregarlo

    • Ivan, si, una lista desplegable la puedes poner donde tu quieras. Sin embargo la acción de búsqueda es la programación que le pongas a tu elemento

  16. Hola Michelle, yo tengo una duda ojalá me puedas apoyar…yo quiero hacer un despliegue en php despues de una busqueda, pero no se como manejarlo. Tengo una lista de productos y al querer seleccionar el articulo no se como jalar label con el artiulo

  17. Hola, es posible sustituir los enlaces de un menú , por ejemplo <option a href:"www.dominio. es" por un codigo html que corresponde a un formulario. Gracias

  18. Hola michelle,

    Me gustaria hacer que al seleccionar una opcion multiple me muestre un texto en un recuadro, lo que estoy realizando es como un cancionario que al escoger uan cancion te muetre la letra,

    Me podrias ayudar?

  19. Un Cordial Saludo!!!

    Estoy trabajando con dos lista desplegable de múltiple selección, pero al momento de realizar el evento de registrar, no lo realiza como se debe esperar!!!

    Este es el código:

    Registro de Examenes
    <?php
    $max="select max(id_examen) as maxid from examen";
    $rs=mysql_query($max,$con);
    if(mysql_num_rows($rs)){
    $codmuestra=mysql_result($rs,0,"maxid")+1; //SE LE SUMA 1 PARA QUE SEA EL REGISTRO CORRELATIVO
    }else{
    $codmuestra=1;}//SINO EXISTE LE AGREGA 1 (EL PRIMERO) SOLO SE CUMPLE UNA SOLA VEZ
    if (strtolower($_REQUEST["acc"])=="registrar"){
    //validaciones
    if($_REQUEST["ced_solicitante"]=="" or $_REQUEST["nombre_solicitante"]==""){
    cuadro_error("Debe llenar todos los campos");
    }else{
    //donde se llevan los datos a la BD

    $fecha_actual = date("Y-m-d");

    $tipo_analisis = "";
    $a = $_REQUEST["analisis"];
    for($i=0; $i<=sizeof($a); $i++)
    {
    $tipo_analisis .= $a[$i].", ";
    }

    $tipo_muestra = "";
    $b = $_REQUEST["muestra"];
    for($x=0; $x<=sizeof($b); $x++)
    {
    $tipo_muestra .= $b[$x].", ";
    }

    $sql="insert into examen(dni_muestra,fecha_solicitud,ced_solicitante,nombre_solicitante,analisis,muestra,prioridad,enviar_email) values('".$codmuestra."''".$fecha_actual."','".strtoupper($_REQUEST["ced_solicitante"])."','".strtoupper($_REQUEST["nombre_solicitante"])."','".$tipo_analisis."','".$tipo_muestra."','".strtoupper($_REQUEST["prioridad"])."','".strtoupper($_REQUEST["enviar_email"])."')";
    $sql2="insert into expediente_examen(ced_paciente,fec_gen_exp,analisis,estado_examen,prioridad) values('".$_REQUEST["ced_solicitante"]."','".$fecha_actual."','".$tipo_analisis."','".strtoupper($_REQUEST["estado_examen"])."','".strtoupper($_REQUEST["prioridad"])."')";
    $sql3="insert into estatus_examen(ced_paciente,fec_gen_exp,analisis,estado_examen) values('".$_REQUEST["ced_solicitante"]."','".$fecha_actual."','".$tipo_analisis."','".strtoupper($_REQUEST["estado_examen"])."')";
    if(mysql_query($sql,$con)){
    if(mysql_query($sql2,$con)){
    if(mysql_query($sql3,$con)){
    cuadro_mensaje("Solicitud de Examén Registrad@ Correctamente…");
    echo "”;
    require(“../theme/footer_inicio.php”);
    exit;
    }else{
    cuadro_error(mysql_error());//emite un mensaje de error de la BD sino se realizo la operacion
    }
    }else{
    cuadro_error(mysql_error());
    }
    }
    }
    }
    ?>

    DATOS DEL EXAMÉN

    Número de Muestra
    <input type="text" name="codmuestra" value="” readonly size=”12″ />

    Cédula del Solicitante/Paciente
    <input type="text" name="ced_solicitante" value="” size=”12″ />

    Nombre del Solicitante/Paciente
    <input type="text" name="nombre_solicitante" value="” size=”40″ />

    Análisis Solicitado

    Seleccionar Análisis

    <option value="UROCULTIVO" >UROCULTIVO
    <option value="COPROCULTIVO" >COPROCULTIVO
    <option value="GRAM DE HECES" >GRAM DE HECES
    <option value="EXUDADO FARINGEO" >EXUDADO FARINGEO
    <option value="CULTIVO DE SECRECION VAGINAL" >CULTIVO DE SECRECION VAGINAL

    <option value="TIEMPOS DE COAGULACIÓN" >TIEMPOS DE COAGULACIÓN
    <option value="HEMATOLOGÍA COMPLETA" >HEMATOLOGÍA COMPLETA
    <option value="UROANÁLISIS" >UROANÁLISIS
    <option value="DESCRIPCIÓN DE FROTIS DE SANGRE PERIFÉRICA" >DESCRIPCIÓN DE FROTIS DE SANGRE PERIFÉRICA
    <option value="COPROANÁLISIS" >COPROANÁLISIS
    <option value="RETRACCIÓN DEL COÁGULO" >RETRACCIÓN DEL COÁGULO

    <option value="PERFIL HORMONAL" >PERFIL HORMONAL
    <option value="PERFIL TIROIDEO" >PERFIL TIROIDEO
    <option value="QUÍMICA CLÍNICA" >QUÍMICA CLÍNICA
    <option value="HORMONAS" >HORMONAS
    <option value="PERFIL FEMENINO" >PERFIL FEMENINO
    <option value="MACHADO GUERREIRO" >MACHADO GUERREIRO
    <option value="INMUNOLOGÍA" >INMUNOLOGÍA
    <option value="PSA TOTAL Y LIBRE" >PSA TOTAL Y LIBRE
    <option value="SEROLOGIA PARA HEPATITIS" >SEROLOGIA PARA HEPATITIS
    <option value="MARCADORES TUMORALES" >MARCADORES TUMORALES
    <option value="MERCURIO" >MERCURIO
    <option value="DROGAS Y MEDICAMENTOS" >DROGAS Y MEDICAMENTOS
    <option value="PRUEBAS ESPECIALES" >PRUEBAS ESPECIALES

    <option value="ANTIGENOS FEBRILES WIDAL" >ANTIGENOS FEBRILES WIDAL
    <option value="DETERMINACIÓN DE HEMOGLOBINA GLICOSILADA" >DETERMINACIÓN DE HEMOGLOBINA GLICOSILADA
    <option value="QUÍMICA SANGUÍNEA" >QUÍMICA SANGUÍNEA
    <option value="SEROLOGÍA" >SEROLOGÍA
    <option value="ELECTROLITOS SÉRICOS" >ELECTROLITOS SÉRICOS
    <option value="PROTEINURIA EN ORINA 24 HORAS" >PROTEINURIA EN ORINA 24 HORAS
    <option value="SEROLOGÍA PARA HEPATITIS" >SEROLOGÍA PARA HEPATITIS
    <option value="PERFIL LIPÍDICO" >PERFIL LIPÍDICO
    <option value="PROTEÍNA C REACTIVA" >PROTEÍNA C REACTIVA
    <option value="RATEST" >RATEST
    <option value="ASLO" >ASLO
    <option value="TIPIAJE DE SANGRE" >TIPIAJE DE SANGRE
    <option value="MICROALBUMINURIA" >MICROALBUMINURIA
    <option value="ORINA 24 HORAS" >ORINA 24 HORAS
    <option value="ORINA AISLADA O PARCIAL" >ORINA AISLADA O PARCIAL

    Tipo de Muestra

    Seleccionar

    HECES
    LIQUIDO CEFALORAQUIDEO
    LIQUIDO PERITONEAL
    LIQUIDO PLEURAL
    LIQUIDO SEMINAL
    LIQUIDO SINOVIAL
    LIQUIDO VAGINAL
    ORINA
    PLASMA
    SANGRE
    SECRECIÓN NASAL
    SECRECIÓN OTICA
    SECRECIÓN VAGINAL
    SUERO

    Estatus del Examén

    Seleccione
    <option value="EN PROCESO" >EN PROCESO
    <option value="POR VERIFICAR" >POR VERIFICAR
    <option value="PROCESADO" >PROCESADO

    Prioridad del Examén

    Seleccione
    <option value="RUTINA" >RUTINA
    <option value="CONTROL NATAL" >CONTROL NATAL
    <option value="EMERGENCIA" >EMERGENCIA

    Enviar por Email

    Seleccione
    <option value="SI" >SI
    <option value="NO" >NO

    Se aceptan sugerencias!!!

  20. Hola Lcda. un saludo desde Venezuela. Deseo hacer algo que, creo, es mucho más sencillo; pero todas las explicaciones que consigo en la WEB me llevan a la información que usted explica en este post.
    Tengo una “Guía de Compras”, que es una simple lista de preguntas y respuestas (FAQS); y quisiera hacerla menos tediosa para el usuario, al presentarsela como un listado de preguntas que al pulsar cualquiera de ellas despliegue la respuesta correspondiente. ¿será posible?

  21. Daniel, mas sencillo de hacer esas listas desplegables de forma dinamica , para que no tengas que reescribir tanto codigo , simplemente con una consulta y un while puedes lograr hacer una lista desplegable de X elementos .

    Por ejemplo :
    $result = mysql_query(“SELECT identificacion , nombres , apellidos FROM clientes order by nombres asc”);
    if (isset($_POST[‘result’]))
    {
    $result = $_POST[‘result’];
    $result2 = mysql_query(“SELECT identificacion , nombres , apellidos FROM clientes where nombres=”.$result.””)
    $nombre = mysql_fetch_array($result);
    }
    else
    {
    @$nombre[nombre]=’Seleccione Nombre’;
    }

    <?php
    while ($Row = mysql_fetch_array($result)) {
    print("$Row[nombres] $Row[apellidos]”);
    }
    ?>

  22. Hola Michelle,

    yo tengo una pregunta como puedo crear un combo box y que al momento de seleccionar la opción 1(ejemplo) se me despliegue una tabla con unos datos, selecciono opción 2, se me despliegan otros datos, y asi sucesivamente, sin la necesidad de usar Base de datos.

    Muchas gracias tu apoyo.

  23. Hola MIchelle:
    1. me selecciona la opción de la lista pero al abrir el email enviado no aparece la opción previamente seleccionada….
    2. Cómo hago para asignar un email por cada opción?
    Muchas gracias

    [text* your-name placeholder “Nombre”]
    [email* your-email placeholder “email”]

    [text your-subject placeholder “Asunto”]
    [text* your-phone placeholder “Teléfono”]

    Elige un centro autorizado:

    Concepto Estetico
    Dra. Rosi Flom
    Dr. Jorge Ottini
    Centro Arenales
    Dr.Damian Rozenberg
    Dr. Ezequiel Chouela
    Dr. Escobar
    Libelle

    DG dermoestética

    Dhermavita
    Instituto Rodriguez Saa
    Dra. Cristina Gandur

    [textarea your-message placeholder “Mensaje”]

    [submit “Enviar”]

  24. Hola…
    Necesitaria que me ayudes por favor…
    Necesito un gadget con un desplegable pero que en ves de opciones tenga un texto. Estoy desesperada porque tengo que entregar un trabajo mañana y no presté atención que me pedian eso. Gracias. Tus desplegables son fantásticos pero no en tamaño el tamaño debería ser un botón y que luego se abra un texto como el tamaño de estecomment

  25. Michelle , buenos dias, una consulta y disculpa, cual es la mejor manera de seleccionar digamos un curso en una aplicacion para celulares, suponte que desarrollo una pagina para inscripcion de cursor y el estudiante en vez de un pc tiene un smartphone? como seria la list de despliegue y en que forma?, gracias.

  26. Hola
    Megustaria saber si se puede hacer que un resultado se multiplique por un despelegable donde tenga 4 numeros “x”, cuando selecione una cantidad del desplegable se multiplique por el resultado de otra operacion.

    Medida a    cm

    Medida b    cm

    Medida c    cm

      Dar al boton para calcular el precio de la pieza.

    €   Precio de la pieza.

    el operando 4 querria que fueran 3 mas y elegir uno que te diera el resultado depebdiendo la variable que le metas de opcion una dos o tres, aqui solo multiplicando por 0.00…… me funciona de maravilla , pero quiero que funcione multiplicando por otras 3 opciones mas.Mil gracias de corazon.

  27. Hola que tal!!
    Una pregunta, para colocar una lista desplegable en un código de la combinación de html y PHP utilizo el de este ejemplo?? C:

  28. Hola Srta. Michelle Torres, si quisiera hacer una lista de este modo por ejemplo:

    En la lista No.1 esta: Microsoft, Linux, Apple

    Seleccionamos Microsoft

    y se abra una segunda lista en la cual ya incluya: Windows XP, vista, 7, 8, 8.1 y 10 por poner un ejemplo.

    Muy semejantes a las lista cuando seleccionas un estado. Primero te dan a elegir el país y posteriormente te dan a elegir los estados.

    Podrías auxiliarme?

    Muchas gracias y saludos cordiales.

  29. Hola, BUEN POST 😀
    Quisiera saber si al crear una lista desplegable con valores numéricos como puedo hacer que se sumen los valores escogidos de dos listas deplegables distintas.

  30. Hola ! que tal !!
    quisiera hacerte una pregunta !

    es posible poner una tabla (para alinear elementos) dentro de un select !?

  31. hola, que tal, mi nombre es Daniel, un gusto, me estoy iniciando en la programación, específicamente en desarrollo de sitios web, estoy dando mis primeros pasos, estoy cursando con un profesor particular que es analista de sistemas y profesor de informatica y la verdad de no saber nada a saber algo, es decir los temas que vi hasta ahora con el profesor, para mi es todo un logro pero se que falta mucho mas, el me lo dice, es una disciplina muy pragmática como el me dice, requierede mucha practica y de razonamiento justamente ahora me mando a hacer un ejercicio, y me dijo que como el hace cuando tiene que programar busca en google. Lo que pasa que yo me hago un poco de lio porque tal vez no se buscar concretamente, porque hay un monton de información, que aparece.
    El ejercicio en forma resumida consiste en que cuando se cumple la condición del color de una remera el programa muestre la remera del rrespectivo color, esto en lenguaje creo html es decir cuando se elije el color en el programa este debe mostrar la remera del respectivo color, o sea la imagen de la remera por ejemplo roja si el usuario elijio ese color en la lista desplegable que muestre la imagen correspondiente al color y los colores son rojo, verde y azul y tengo que buscar por internet imágenes de remeras con ese color soy de Argentina, te encontré googleando listas desplegables con html si quieres también te puedo mandar los archivos escritos en lenguaje php y html para que se entienda mejor la consigna
    disculpa tanto texto

  32. Este es el código del formulario

    Complete el formulario
    Ingrese el precio base de la remera

    Elija el talle de la remera

    Small
    Medium
    Large
    Extra large

    Elija el color de la remera

    Rojo
    Verde
    Azul

DEJA UNA RESPUESTA

Please enter your comment!
Please enter your name here