El nuevo mdui 2 basado en Material Design 3 y Web Components ya está disponible. Consulta la documentación de mdui 2 ahora.

Select

El componente de selección desplegable permite a los usuarios elegir entre varias opciones.

Modo de uso

Invocación mediante clases CSS
Invocación mediante atributos personalizados (si el componente se genera dinámicamente, es necesario llamar a mdui.mutation() para inicializarlo)
Llamada vía JavaScript

Lectura relacionada

Pautas de diseño de Material Design: componentes - Select

Estilo

Componente select nativo de una sola opción

Añade la clase .mdui-select al elemento <select> para darle un estilo mejorado, sin necesidad de llamar a JavaScript.

Ejemplo

<select class="mdui-select">
  <option value="1" selected>State 1</option>
  <option value="2">State 2</option>
  <option value="3">State 3</option>
  <option value="4">State 4</option>
  <option value="5">State 5</option>
  <option value="6">State 6</option>
</select>

Componente select nativo de varias opciones

También puedes añadir la clase .mdui-select a un elemento <select multiple> para permitir la selección múltiple. Sin embargo, no todos los navegadores muestran este estilo correctamente.

Ejemplo

<select multiple size="8" class="mdui-select">
  <optgroup label="Fonts">
    <option>Roboto</option>
    <option>Calibri</option>
    <option>Courier New</option>
    <option>Verdana</option>
  </optgroup>
  <optgroup label="Size">
    <option>50%</option>
    <option>75%</option>
    <option>90%</option>
    <option>100%</option>
  </optgroup>
  <optgroup label="header">
    <option>h1</option>
    <option>h2</option>
    <option>h3</option>
    <option>h4</option>
  </optgroup>
</select>

Modo de uso

Llamada vía atributos

Con este método no necesitas escribir código JavaScript. Solo tienes que añadir la clase .mdui-select y el atributo mdui-select="options" al elemento <select>.

Si el componente se genera dinámicamente, necesitas llamar a mdui.mutation() para inicializarlo.

Ejemplo

<select class="mdui-select" mdui-select>
  <option value="1">State 1</option>
  <option value="2">State 2</option>
  <option value="3" disabled>State 3</option>
  <option value="4">State 4</option>
  <option value="5">State 5</option>
  <option value="6">State 6</option>
</select>

Ejemplo

<select class="mdui-select" mdui-select="{position: 'top'}">
  <option value="1">State 1</option>
  <option value="2">State 2</option>
  <option value="3" disabled>State 3</option>
  <option value="4">State 4</option>
  <option value="5">State 5</option>
  <option value="6">State 6</option>
</select>

Ejemplo

<select class="mdui-select" mdui-select="{position: 'bottom'}">
  <option value="1">State 1</option>
  <option value="2">State 2</option>
  <option value="3" disabled>State 3</option>
  <option value="4">State 4</option>
  <option value="5">State 5</option>
  <option value="6">State 6</option>
</select>

Llamada vía JavaScript

Instanciar el componente:

// selector es el selector CSS del elemento <select>, o un elemento DOM, o una cadena HTML
// options son los parámetros de configuración; consulta la lista de parámetros a continuación
var inst = new mdui.Select(selector, options);

Ejemplo

<select class="mdui-select" id="demo-js">
  <option value="1">State 1</option>
  <option value="2">State 2</option>
  <option value="3" disabled>State 3</option>
  <option value="4">State 4</option>
  <option value="5">State 5</option>
  <option value="6">State 6</option>
</select>

<script>
  var inst = new mdui.Select('#demo-js');
</script>

Parámetro

Nombre	Tipo	Valor por defecto	Descripción
`position`	`string`	`auto`	La posición del menú de selección. Incluye `auto`, `top` y `bottom`.
`gutter`	`int`	`16`	La distancia mínima entre el menú de selección y los bordes superior e inferior de la ventana, en píxeles. Este parámetro solo es válido si `position` es `auto`.

Método

Nombre del método	Descripción
`open()`	Abre el menú desplegable.
`close()`	Cierra el menú desplegable.
`toggle()`	Alterna el estado abierto del menú desplegable.
`handleUpdate()`	Cuando cambias dinámicamente el contenido del elemento `<select>`, debes llamar a este método para volver a generar el menú desplegable.
`getState()`	Devuelve el estado abierto actual del menú desplegable. Incluye cuatro estados: `opening`, `opened`, `closing` y `closed`.

Evento

Nombre del evento	Descripción	Objetivo	Parámetros
`open.mdui.select`	Se disparará cuando el menú desplegable empiece la animación de apertura.	`<select class="mdui-select"></select>`	`event._detail.inst`: instancia
`opened.mdui.select`	Se disparará cuando el menú desplegable termine la animación de apertura.
`close.mdui.select`	Se disparará cuando el menú desplegable empiece la animación de cierre.
`closed.mdui.select`	Se disparará cuando el menú desplegable termine la animación de cierre.

Lista de clases CSS

Nombre de clase	Descripción
`.mdui-select`	Define un componente Select.

Botón FAB

Separador