Pure JS dual list box componente

Vista prévia

Descripción

Un plugin de JavaScript puro que convierte el cuadro de selección normal en un cuadro de lista dual donde los usuarios pueden mover opciones entre dos paneles de selección.

Funcionamiento

Agregue la hoja de estilos ' dual-ListBox. css ' y el archivo JavaScript ' dual-ListBox. js ' a la Página Web.

<link href="dist/dual-listbox.css" rel="stylesheet">
<script src="dist/dual-listbox.js"></script>

Inicialice DualListbox en el cuadro de selección de destino y listo.

<select class="demo" multiple>

<option value="1">One</option>

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

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

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

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

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

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

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

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

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

demo = new DualListbox('.selectDemo');

Opciones predeterminadas que se pueden sobrescribir para personalizar el cuadro de lista dual.

DualListbox('.selectDemo',{

addEvent: function(value) {



console.log(value);

},

removeEvent: function(value) {



console.log(value);

},

availableTitle: 'Different title',

selectedTitle: 'Different title',

addButtonText: '>',

removeButtonText: '<', addAllButtonText: '>>',

removeAllButtonText: '<<',

options: [



{text:"Option 1", value: "OPTION1"},



{text:"Option 2", value: "OPTION2"},



{text:"Selected option", value: "OPTION3", selected:true}

]
});

Registro de cambios

v1.2.0 (05/22/2018)

• Se han añadido las opciones para no mostrar los botones.