jquery-select2 - values - select2 selected

Select2 con una lista de casilla de verificación para una selección múltiple

Question

Necesito implementar una selección similar a esta http://www.erichynds.com/examples/jquery-ui-multiselect-widget/demos/

Quiero usar select2 para esto, pero no he podido encontrar nada del creador de select2 que sea compatible con este estilo de menú desplegable con casillas de verificación en él. ¿Sabe alguien una forma de hacer ésto?

Answer 1

Agrega solo dos emoji con css

.select2-results__options {
&[aria-multiselectable=true] {
.select2-results__option {
&[aria-selected=true]:before {
content: ''☑'';
padding: 0 0 0 4px;
}
&:before {
content: ''◻'';
padding: 0 0 0 4px;
}
}
}
}

Verá esta muestra una casilla de verificación RTL select2 con emoji.

Answer 2

He enfrentado una necesidad similar pero no pude encontrarla.

La solución que encontré fue usar el indicador closeOnSelect establecido en falso

$("#yadayada").select2({closeOnSelect:false}); http://jsfiddle.net/jEADR/521/

Answer 3

Me las arreglé para poner algo juntos, no perfecto, pero funciona.

https://jsfiddle.net/Lkkm2L48/7/

jQuery(function($) {
$.fn.select2.amd.require([
''select2/selection/single'',
''select2/selection/placeholder'',
''select2/selection/allowClear'',
''select2/dropdown'',
''select2/dropdown/search'',
''select2/dropdown/attachBody'',
''select2/utils''
], function (SingleSelection, Placeholder, AllowClear, Dropdown, DropdownSearch, AttachBody, Utils) {
var SelectionAdapter = Utils.Decorate(
SingleSelection,
Placeholder
);
SelectionAdapter = Utils.Decorate(
SelectionAdapter,
AllowClear
);
var DropdownAdapter = Utils.Decorate(
Utils.Decorate(
Dropdown,
DropdownSearch
),
AttachBody
);
var base_element = $(''.select2-multiple2'')
$(base_element).select2({
placeholder: ''Select multiple items'',
selectionAdapter: SelectionAdapter,
dropdownAdapter: DropdownAdapter,
allowClear: true,
templateResult: function (data) {
if (!data.id) { return data.text; }
var $res = $(''<div></div>'');
$res.text(data.text);
$res.addClass(''wrap'');
return $res;
},
templateSelection: function (data) {
if (!data.id) { return data.text; }
var selected = ($(base_element).val() || []).length;
var total = $(''option'', $(base_element)).length;
return "Selected " + selected + " of " + total;
}
})
});
});

CSS:

.select2-results__option .wrap:before{
font-family:fontAwesome;
color:#999;
content:"/f096";
width:25px;
height:25px;
padding-right: 10px;
}
.select2-results__option[aria-selected=true] .wrap:before{
content:"/f14a";
}

Answer 4

Otra solución es "anteponer" los iconos de la casilla de verificación mediante CSS. Utilizo el tema bootstrap - su select2-container puede ser diferente.

.select2-container--bootstrap .select2-results__option[aria-selected=true]:before { content:''/e067 ''; padding:0 8px 0 0px; font-family:''Glyphicons Halflings'' }
.select2-container--bootstrap .select2-results__option:before { content:''/e157 ''; padding:0 8px 0 0px; font-family:''Glyphicons Halflings'' }

Answer 5

Parece que esta es una publicación antigua, pero como es un problema muy común, estoy publicando esto aquí.

Descubrí que el autor ya había agregado un complemento a select2 para que esta función tuviera una selección similar a una casilla de verificación y el menú desplegable no se oculta al hacer clic:

https://github.com/wasikuss/select2-multi-checkboxes

Ejemplo:

$(''.select2-multiple'').select2MultiCheckboxes({
placeholder: "Choose multiple elements",
})

http://jsfiddle.net/wasikuss/gx93rwnk/

Todas las demás características de select2 se conservan. Hay algunas opciones predefinidas más para funcionar correctamente.