Bonito cuadro de selección de Replacemenet con JavaScript puro-tastySelect

Vista prévia

Descripción

tastySelect es un complemento de JavaScript para crear una lista desplegable animada, bastante bonita y de selección múltiple sin ninguna dependencia.

Funcionamiento

Importe el código JavaScript y la hoja de estilos de tastySelect a la Página Web.

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

Cree un elemento de selección "múltiple" normal como estos

<select name="" id="tastySelect" multiple>

<optgroup label="JavaScript">


<option value="jQuery">jQuery</option>


<option value="React">ReactJS</option>


<option value="Angular">AngularJS</option>

</optgroup>

<optgroup label="HTML">


<option value="HTML5">HTML 5</option>


<option value="XML">XML</option>


<option value="XHTML">XHTML</option>

</optgroup>

<option value="css">CSS/SCSS/LESS</option>

<option value="more">More Options Here</option>
</select>

Inicializar la biblioteca tastySelect y listo.

tastySelect({

defaultText: "Select Multiple Options Via (Ctrl+Click)"
});

Más opciones de configuración con valores predeterminados.

tastySelect({

selector: 'select',

mobileFix: true,

mask: '%',

maskJoin: ', ',

ctrlKey: false,

search: false,

defaultText: 'Select item...',

classes : {


outer: 'style-select',


title: 'style-select-title',


options: 'style-select-options',


label: 'style-select-label',


searchOuter: 'style-select-search-outer',


search: 'style-select-search',


optgroup: 'style-select-optgroup',


list: 'style-select-list',


item: 'style-select-option',


open: 'st_open',


selected: 'st_selected',


disabled: 'st_disabled',


mobile: 'is_mobile',


multiple: 'is_multiple',

},

attributes : {


index: 'data-index',


value: 'data-value',


selectReady: 'data-tastyselect',

},
});

Registro de cambios

07/10/2018

• Añadida la posibilidad de buscar por opciones