使用select2可选择optgroup [英] Selectable optgroup using select2

问题描述

我已经使用select2从下拉列表中选择多个选项，但select2是否可以选择完整的optgroup？我想要的是，当用户选择选项组时，应该选择所有的子选项。我想用jQuery Select2 来做到这一点。我怎么能这样做？

解决方案

如果您使用隐藏的输入元素返回Select2而不是select元素。

要使组选项可选，您必须给它一个id，但它看起来可以是一个空字符串。然后，您可以使用select2-selection事件来阻止选择组选项，而是让其子选项被选中。

另外，<$ c可以提供$ c> query 函数来防止在选择所有子选项后列表中出现组选项。

如果你有这样定义的选项：

  var FRUIT_GROUPS = [
 {
 id：''，
 text：'Citrus'，
 children：[
 {id：'c1'，text：'Grapefruit'}，
 {id：'c2'，text：'Orange' }，
 {id：'c3'，text：'Lemon'}，
 {id：'c4'，text：'lime'} 
] 
}，
 {
 id：''，
 text：'Other'，
 children：[
 {id：'o1'，text：'Apple'}，
 {id：'o2'，text：'Mango'}，
 {id：'o 3'，文本：'香蕉'} 
] 
} 
]; 
  

您可以像这样测试您的Select2：

< pre $ $（'＃fruitSelect'）。select2（{
multiple：true，
placeholder：Select fruits ...，
data： FRUIT_GROUPS，
query：function（options）{
var selectIds = options.element.select2（'val'）;
var selectableGroups = $ .map（this.data，function（group） {
var areChildrenAllSelected = true;
$ .each（group.children，function（i，child）{
if（selectedIds.indexOf（child.id）< 0）{
areChildrenAllSelected = false;
return false; // Short-circuit $ .each（）
}
}）;
return！areChildrenAllSelected？group：null;
）};
options.callback（{results：selectableGroups}）;
}
}）。on（'select2-selecting'，function（e）{
var $选择= $（this）;
if（e .val ==''）{//假设只有组有一个空的id
e.preventDefault（）;
$ select.select2（'data'，$ select.select2（'data'）。concat（e.choice.children））;
$ select.select2（'close'）;
}
}）;


jsfiddle

这是 jsfiddle 查询函数，其中组选项在所有子选项被选中时仍然出现。 b $ b

I have used select2 to select multiple options from a drop down, but is it possible for select2 to select the full optgroup?? What I want is when user select the option group all the child options should be selected. And I want to do this using jQuery Select2. How could I do this?

解决方案

This is possible if you back the Select2 with a hidden input element -- instead of a select element.

To make a group option selectable, you must give it an "id", but it appears it can be an empty string. You can then use the "select2-selecting" event to prevent the group option from getting selected, and instead have its child options get selected.

Additionally, a query function can be provided to prevent a group option from appearing in the list after all its child options have been selected.

If you have options defined like this:

var FRUIT_GROUPS = [
    {
        id: '',
        text: 'Citrus',
        children: [
            { id: 'c1', text: 'Grapefruit' },
            { id: 'c2', text: 'Orange' },
            { id: 'c3', text: 'Lemon' },
            { id: 'c4', text: 'Lime' }
        ]
    },
    {
        id: '',
        text: 'Other',
        children: [
            { id: 'o1', text: 'Apple' },
            { id: 'o2', text: 'Mango' },
            { id: 'o3', text: 'Banana' }
        ]
    }
];

You can instrument your Select2 like this:

$('#fruitSelect').select2({
    multiple: true,
    placeholder: "Select fruits...",
    data: FRUIT_GROUPS,
    query: function(options) {
        var selectedIds = options.element.select2('val');
        var selectableGroups = $.map(this.data, function(group) {
            var areChildrenAllSelected = true;
            $.each(group.children, function(i, child) {
                if (selectedIds.indexOf(child.id) < 0) {
                    areChildrenAllSelected = false;
                    return false; // Short-circuit $.each()
                }
            });
            return !areChildrenAllSelected ? group : null;
        });
        options.callback({ results: selectableGroups });
    }
}).on('select2-selecting', function(e) {
    var $select = $(this);
    if (e.val == '') { // Assume only groups have an empty id
        e.preventDefault();
        $select.select2('data', $select.select2('data').concat(e.choice.children));
        $select.select2('close');
    }
});

jsfiddle

Here is a jsfiddle without the query function, where the group options still appear when all of their child options are selected.

这篇关于使用select2可选择optgroup的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！