jquery - 使用 select2 的可选 optgroup

Question

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

Answer 1

如果您使用隐藏的输入元素而不是选择元素支持 Select2，这是可能的。

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

此外，可以提供一个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: 'o3', text: 'Banana' }
        ]
    }
];

您可以像这样检测您的 Select2:

$('#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

这是一个jsfiddle没有 query 函数，当所有子选项都被选中时，组选项仍然出现。