> For the complete documentation index, see [llms.txt](https://03-jon-perez.gitbook.io/coding-library/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://03-jon-perez.gitbook.io/coding-library/html/formularios/select-y-datalist.md).

# Select y datalist

### Select

El elemento select (`<select>`) de HTML representa un control que muestra un menú de opciones. Las opciones contenidas en el menú son representadas por elementos `<option>`, los cuales pueden ser agrupados por elementos `<optgroup>` (en-US). La opcion puede estar preseleccionada por el usuario.

```html
<select name="select">
  <option value="value1">Value 1</option>
  <option value="value2" selected>Value 2</option>
  <option value="value3">Value 3</option>
</select>
```

> La propiedad selected establece que la opcion por defecto sera la segunda

<figure><img src="https://3717492794-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FTbieshNvNxHi9vw1SFR3%2Fuploads%2F2rJiPzj36fhUu7L4JUaU%2FScreen%20Shot%202022-11-22%20at%205.22.46%20PM.png?alt=media&amp;token=77af9058-9aa1-46d6-80e1-81ca4ac41bd2" alt=""><figcaption></figcaption></figure>

#### \<optgroup>

Si tenemos muchas opciones podemos ordenarlas por categorias a traves de la etiqueta `<optgroup>` con el atributo label para nombrar la categoria.

```html
<select name="select">
    <optgroup label="grupo1">
        <option value="value1">Value 1</option>
        <option value="value2" selected>Value 2</option>
    </optgroup>
    <optgroup label="grupo2">
        <option value="value3">Value 3</option>
        <option value="value4" selected>Value 4</option>
    </optgroup>
</select>
```

### Datalist

El **elemento HTML `<datalist>`** contiene un conjunto de elementos `<option>` que representan los valores disponibles para otros controles. Este elemento fucniona parecido a `<select>` aunque es mas comodo, ya que nor permite dar una descripcion sobre los elementos y filtrarlos.&#x20;

> Para su utilizacion es necesaria la combinacion de `input` con el atributo `list`

```html
<label>Choose a browser from this list:
<input list="browsers" name="myBrowser" /></label>
<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Internet Explorer">
  <option value="Opera">
  <option value="Safari">
  <option value="Microsoft Edge">
</datalist>
```