Select 2

El Select 2 es un componente que permite al usuario elegir una o varias opciones de una lista desplegable. En su versión simple, permite seleccionar solo una opción, ideal para decisiones únicas o definitivas. En su versión múltiple, permite seleccionar varias opciones, útil para filtros o configuraciones que requieren múltiples criterios. Este componente optimiza el espacio en pantalla y facilita la selección organizada de opciones predefinidas.

Playground

Selección de ComunaAlabamaWyomingIowaFlorida

Selección de Comuna Ajax 1Ajax 2Ajax 3Ajax 4

Cambia el placeholder

Campo requerido

Label con Tooltip

Selección Múltiple

Cargar datos AJAX

Helper Text

Disabled

Readonly

Error

Usar select nativo

Ruby

<%= simple_form_for @comuna do |field| %>
  <% coleccion_de_comunas = ['Alabama', 'Wyoming', 'Iowa', 'Florida'] %>
  <%= field.input :comuna,
                  collection: coleccion_de_comunas,
                  include_blank: 'Seleccionar...',
                  label: 'Selección de Comuna',
                  input_html: {
                    class: 'form-control',
                    data: {
                      
                      dropdown_parent_string: '#id_modal' #<- Evita que contenido desplegable de selector quede oculto (usar id que se agrega en 'id_modal' del componente modal ) 
                    }
                  } %>
<% end %>

Html

<div class="form-group">
    <label
      htmlFor="job_location"
      class="control-label"
      >
      Selección de Comuna
    </label>
      <select class="js-data-example-ajax" name="state" defaultValue='def'  >
        <option value='def'disabled >Seleccionar...</option>
        <option value="AL">Alabama</option>
        <option value="WY">Wyoming</option>
        <option value="IO">Iowa</option>
        <option value="FL">Florida</option>
      </select>
  </div>

Groovy

<link href='<g:resource dir="sb-admin-2"/>/css/plugins/select2.min.css' rel="stylesheet" />
<script>
  <div class="form-group ">
    <label htmlFor="job_location" class="control-label required">Selección de Comuna </label>
      <select class="js-data-example-ajax" name="state" defaultValue='def' >
        <option value='def'disabled >Seleccionar...</option>
        <option value="AL">Alabama</option>
        <option value="WY">Wyoming</option>
        <option value="IO">Iowa</option>
        <option value="FL">Florida</option>
      </select>
  </div>
</script>
<script type="text/javascript" src="<g:resource dir='js'/>/plugins/select2/select2.min.js"></script>

Lista de parámetros

Propiedad	Tipo	Detalle
collection	Array	Primer parámetro, recibe una colección para llenar select
input_html	Array	Propiedades HTML para el input
include_blank	String	Opción del selector que funciona como placeholder
className	String	Define la clase del selector en el formulario
hint	String	Corresponde a un texto de ayuda que se posiciona por debajo del input
required	Boolean, default: false	Define si campo de selector en formulario es obligatorio
multiple	Boolean, default: false	Indica si se permite selección múltiple
disabled	Boolean, default: false	Indica si el input estará deshabilitado para su uso
allow_clear	Boolean, default: false	Muestra un botón de eliminar (icono "x") en el input cuando hay un valor seleccionado.
data	Object	Data que definirá opciones del componente
dropdown_parent_string	String	Evita que contenido desplegable de selector quede oculto

Anatomía

Casos de uso

Select2 se utiliza en reemplazo del select nativo, se usa para secciones más complejas, admite cuadros de selección múltiple. Adicionalmente puede tener un árbol de navegación con opciones desplegables de un valor o varios valores elegibles.

Buscador: Se usa buscador cuando hay más de 5 opciones disponibles para el usuario, al hacer click en el selector debe activarse inmediatamente el buscador.

Texto: el texto no debe sobrepasar su contenedor, cuando son textos largos debe bajar a la siguiente línea.