Conveniente selección de la lista de mejora-selector

Vista prévia

Descripción

Un plugin de JavaScript mínimo y puro que transforma el elemento de selección regular en una lista desplegable hermosa, conveniente, con capacidad de búsqueda/filtrable.

Funcionamiento

Cargue los principales archivos JavaScript y CSS en su archivo HTML.

<link rel="stylesheet" href="main.min.css">
<script src="main.min.js"></script>

Agregue la clase CSS ' selector-instance ' a su elemento Select existente como este:

<select class="selector-instance" name="first-selector" id="first">

<option value="1" data-sublocale="HELLO" selected>Item 1</option>

<option value="2">Item 2</option>

<option value="3">Item 3</option>

<option value="4">Item 4</option>

<option value="5">Item 5</option>

<option value="6">Item 6</option>
</select>

Inicialice el selector y listo.

new Selector();

Si desea mostrar un campo de búsqueda dentro de la lista desplegable, simplemente agregue el atributo Data-Type = "Search-selector" al SELECT y done.

<select class="selector-instance" data-type="search-selector" name="third-selector" id="second">

<option value="1" data-sublocale="HELLO" selected>Item 1</option>

<option value="2">Item 2</option>

<option value="3">Item 3</option>

<option value="4">Item 4</option>

<option value="5">Item 5</option>

<option value="6">Item 6</option>

<option value="7">Item 7</option>

<option value="8">Item 8</option>

<option value="9">Item 9</option>

<option value="10">Item 10</option>
</select>

Opciones posibles con valores predeterminados.

new Selector({



// selector


selector: null,



// target element


element: null,



// custom label


label: null,



// normal and filter


type: null,



// disable selector instance


disabled: false,



// distinguish between multiple instances


identifier: null,



// makes opened options cover selected item box


cover: false,



// relative positioned


relative: false





// callbacks


callback: null,


onOpen: null,


onClose: null,


onSelect: null,



// hooks


destroy: null,


created: null,


opened: null,


closed: null,


selected: null,


beforeCreate: null,


beforeDestroy: null,


destroyed: null,


beforeSelect: null,



});

Registro de cambios

v3.2.0 (06/06/2018)

• añadido más opciones