具有多选复选框列表的Select2
具有多选复选框列表的Select2
提问于 2014-04-08 00:37:36
我需要实现一个类似于此http://www.erichynds.com/examples/jquery-ui-multiselect-widget/demos/的select
我想使用select2来实现这一点，但是我还没有从select2的创建者那里找到任何支持这种带有复选框的下拉列表样式的东西。有谁知道这样做的方法吗？
回答 7
Stack Overflow用户
发布于 2014-07-29 18:01:34
我也遇到过类似的需求，但我找不到。
我遇到的解决方案是将标志closeOnSelect设置为false
$("#yadayada").select2({closeOnSelect:false}); http://jsfiddle.net/jEADR/521/
Stack Overflow用户
发布于 2017-05-14 17:49:53
这似乎是一个老帖子，但由于这是一个非常常见的问题，我在这里贴出了这篇文章。
我发现作者已经在select2中为这个功能添加了一个插件，使其具有类似复选框的选择，并且下拉菜单在点击时不会隐藏：
https://github.com/wasikuss/select2-multi-checkboxes
示例：
$('.select2-multiple').select2MultiCheckboxes({
placeholder: "Choose multiple elements",
})http://jsfiddle.net/wasikuss/gx93rwnk/
保留了select2的所有其他功能。只有更多的预定义选项设置才能正常工作。
Stack Overflow用户
发布于 2017-10-26 02:10:41
我设法把一些东西组合在一起，虽然不是完美的，但它是有效的。
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";
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/22918178
复制相关文章
相似问题
腾讯云开发者
