MultiList allows you to customize a selector(Use Select2(4.0.0)), wherein the selected traits are in a sortable list (Use Nestable2)
bower install multiList
you can create a MultiList in two ways:
-
- passing a query of an element
$('#asigned_terms3').multiList();
-
- passing a query multiple $('select').MultiMultiList().
$('.classAllSelect').multiMultiList();
$('select').multiMultiList();
MultiList parameters:
- orientation: Vertical or Horizontal
- placeholder: String
- icon: String html
- itemActions: Array Objects{ id, html, action(function)}
Vertical lists ordering them selected from the top down. Horizontal shows another type of styles that allow you to sort horizontally.
Example:
$('#asigned_terms3').multiList({
orientation: 'horizontal',
placeholder: 'Select options',
itemActions: [
{ 'id': 'edit', 'html': '<i class="fa fa-pencil-square-o"></i>', 'action': editCollection },
{ 'id': 'show', 'html': '<i class="fa fa-circle-thin"></i>', 'action': showCollection }
],
'icon': '<i class="fa fa-arrows"></i>'
});
If you create multiple MultiList with multiMultiList all would have the same options.
The result of ordering the selected list is saved in the native switch to the attribute data-order
Example Native Select Result:
<select style="width:250px;" multiple="" id="asigned_terms3" tabindex="-1" class="select2-hidden-accessible" aria-hidden="true">
<option value="24" data-order="1" data-multilist-id="15">Prueba creacion de termino 1</option>
<option value="25" data-order="2" data-multilist-id="16">Prueba creacion de termino 2</option>
<option value="26" data-order="3" data-multilist-id="17">Prueba creacion de termino 3</option>
<option value="27" data-order="4" data-multilist-id="18">Destacado1_es</option>
<option value="28" data-order="5" data-multilist-id="19">Destacado2_es</option>
<option value="29" data-order="6" data-multilist-id="20">Destacado3_es</option>
</select>
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent