Menú desplegable dinámico de selección múltiple en Vanilla JavaScript-MultiSelect

Vista prévia

Descripción

La biblioteca MultiSelect JavaScript genera un elegante elemento Select de una matriz de JavaScript que permite al usuario seleccionar varios elementos de la lista desplegable.

Funcionamiento

Instale & importar.

# NPM
$ npm install @dotburo/multi-select --save

import MultiSelect from 'multi-select';

O cargue la versión UMD en el documento.

<script src="multi-select-umd.js"></script>

Cargue la hoja de estilos necesaria en el documento.

<link href="base.min.css" rel="stylesheet">

Cree un elemento contenedor para la lista desplegable de selección múltiple.

<div class="multi-select"></div>

Insertar elementos (opciones) en una matriz de JavaScript (o una matriz de objetos):

const myData = ['JavaScript', 'HTML5', 'CSS & CSS3', 'PHP', 'Object C', 'Python']

Asocie el MultiSelect al elemento contenedor y especifique el origen de datos.

var multiSelect = new MultiSelect('.multi-select', {


items: myData
});

Establezca el elemento actual.

var multiSelect = new MultiSelect('.multi-select', {


items: myData


current: ['Python']
});

// or
multiSelect.setCurrent('Python');

Available customization options.

var multiSelect = new MultiSelect('.multi-select', {


items: myData


display: 'value', // the property to use


current: null,


parent: null, // parent element


maxHeight: 0,


sort: true, // sort the dropdown list


order: 'desc', // or arc


placeholder: 'Select items',


more: '(+{X} more)'
});

Desencadenar un evento cuando se cambia el valor.

multiSelect.on('change', function (e) {

console.log(e.detail, multiSelect.getCurrent());
});

API methods.

// toggle the multi-select dropdown
// false = show
multiSelect.toggle(true);

// get the element
multiSelect.getElement();

// get all the items
multiSelect.getItems();

// get the selected items
multiSelect.getCurrent();

// set the current items
multiSelect.setCurrent();

// find an item by value
multiSelect.findItem(value);

// destroy the library
multiSelect.remove();

Registro de cambios

03/23/2019

• Pequeñas mejoras