Buscar..


Sintaxis

  • <select name=""></select>
  • <datalist id=""></datalist>
  • <optgroup label="Option Group"></optgroup>
  • <option value="">Option</option>

Seleccione el menú

El elemento <select> genera un menú desplegable desde el cual el usuario puede elegir una opción.

<select name="">
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
  <option value="4">Four</option>
</select>

Cambiando el tamaño

Puede cambiar el tamaño del menú de selección con el atributo de size . Un tamaño de 0 o 1 muestra el menú de estilo desplegable estándar. Un tamaño mayor que 1 convertirá el menú desplegable en un cuadro que muestra tantas líneas, con una opción por línea y una barra de desplazamiento para desplazarse por las opciones disponibles.

<select name="" size="4"></select>

Por defecto, los usuarios solo pueden seleccionar una sola opción. Agregar el atributo multiple permite a los usuarios seleccionar múltiples opciones a la vez y enviar todas las opciones seleccionadas con el formulario. El uso del atributo multiple convierte automáticamente el menú desplegable en un cuadro como si tuviera un tamaño definido. El tamaño predeterminado cuando esto ocurre está determinado por el navegador específico que está utilizando, y no es posible cambiarlo de nuevo a un menú de estilo desplegable mientras se permiten varias selecciones.

<select name="" multiple></select>

Cuando se usa el atributo multiple , hay una diferencia entre usar 0 y 1 para el tamaño, mientras que no existe diferencia cuando no se usa el atributo. El uso de 0 hará que el navegador se comporte de la manera predeterminada para la que está programado. El uso de 1 establecerá explícitamente el tamaño del cuadro resultante en solo una fila.

Grupos opcionales

Puede agrupar cuidadosamente sus opciones dentro de un menú de selección para proporcionar un diseño más estructurado en una larga lista de opciones utilizando el elemento <optgroup> .

La sintaxis es muy básica, simplemente usando el elemento con un atributo de label para identificar el título para el grupo, y que contiene cero o más opciones que deberían estar dentro de ese grupo.

<select name="">
  <option value="milk">Milk</option>
  <optgroup label="Fruits">
    <option value="banana">Bananas</option>
    <option value="strawberry">Strawberries</option>
  </optgroup>
  <optgroup label="Vegetables" disabled>
    <option value="carrot">Carrots</option>
    <option value="zucchini">Zucchini</option>
  </optgroup>
</select>

Cuando se usan grupos de opciones, no todas las opciones deben estar contenidas dentro de un grupo. Además, deshabilitar un grupo de opciones deshabilitará todas las opciones dentro del grupo, y no es posible volver a habilitar manualmente una sola opción dentro de un grupo deshabilitado.

Opciones

Las opciones dentro de un menú de selección son las que el usuario seleccionará. La sintaxis normal para una opción es la siguiente:

<option>Some Option</option>

Sin embargo, es importante tener en cuenta que el texto dentro del elemento <option> sí no siempre se usa, y esencialmente se convierte en el valor predeterminado para los atributos que no se especifican.

Los atributos que controlan el aspecto real y la función de la opción son value y label . La etiqueta representa el texto que se mostrará en el menú desplegable (lo que está viendo y hará clic para seleccionarlo). El valor representa el texto que se enviará junto con el envío del formulario. Si se omite alguno de estos valores, en su lugar utiliza el texto dentro del elemento como el valor. Así que el ejemplo que dimos arriba podría ser "expandido" a esto:

<option label="Some Option" value="Some Option">

Tenga en cuenta la omisión del texto interno y la etiqueta final, que no se requieren para construir una opción dentro del menú. Si se incluyeran, el texto interno se ignoraría porque ambos atributos ya están especificados y el texto no es necesario. Sin embargo, probablemente no verá a mucha gente escribirlos de esta manera. La forma más común en que se escribe es con un valor que se enviará al servidor, junto con el texto interno que eventualmente se convierte en el atributo de la etiqueta, de esta manera:

<option value="option1">Some Option</option>

Seleccionando una opción por defecto

También puede especificar una determinada opción para ser seleccionada en el menú por defecto adjuntando el atributo selected . De forma predeterminada, si no se especifica ninguna opción como seleccionada en el menú, la primera opción en el menú se seleccionará cuando se renderice. Si más de una opción tiene el atributo selected adjunto, entonces la última opción presente en el menú con el atributo será la seleccionada de forma predeterminada.

<option value="option1" selected>Some option</option>

Si está utilizando el atributo en un menú de selección de múltiples opciones, entonces todas las opciones con el atributo se seleccionarán de forma predeterminada, y ninguna se seleccionará si ninguna opción tiene el atributo.

<select multiple>
  <option value="option1" selected>Some option</option>
  <option value="option2" selected>Some option</option>   
</select>

Lista de datos

La etiqueta <datalist> especifica una lista de opciones predefinidas para un elemento <input> . Proporciona una función "autocompletar" en <input> elementos <input> . Los usuarios verán una lista desplegable de opciones a medida que escriben.

<input list="Languages">

<datalist id="Languages">
  <option value="PHP">
  <option value="Perl">
  <option value="Python">
  <option value="Ruby">
  <option value="C+">
</datalist>

Soporte del navegador

Cromo Borde Mozilla Safari Ópera
20.0 10.0 4.0 No soportado 9.0


Modified text is an extract of the original Stack Overflow Documentation
Licenciado bajo CC BY-SA 3.0
No afiliado a Stack Overflow