> 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="/files/owgdPm6O88q8pR12Vw5f" 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>
```


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://03-jon-perez.gitbook.io/coding-library/html/formularios/select-y-datalist.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.