Выберите 2 группы выберите.Значения Автоматически переходит наверх, когда мышь находится над значениями - PullRequest
Новая
       12

Выберите 2 группы выберите.Значения Автоматически переходит наверх, когда мышь находится над значениями

1 голос
/ 09 апреля 2019

У меня проблема с Select2 optgroup, выберите из здесь .Конечно, прежде чем написать это, я прокомментировал ранее в этой теме, но у меня нет ответов.

HTML 

<input type="hidden" id="fruitSelect" value="" style="width:300px;" /><br />
<br />
<button type="button" id="showValue">Show Value</button><br />
<br />
<div id="output">
</div>

JS 

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' }
        ]
    }
    ,
    {
        id: '',
        text: 'Other',
        children: [
            { id: 'o1', text: 'Apple' },
            { id: 'o2', text: 'Mango' },
            { id: 'o3', text: 'Banana' }
        ]
    },
    {
        id: '',
        text: 'Other2',
        children: [
            { id: 'o1', text: 'Apple2' },
            { id: 'o2', text: 'Mango2' },
            { id: 'o3', text: 'Banana2' }
        ]
    },
    {
        id: '',
        text: 'Other3',
        children: [
            { id: 'o1', text: 'Apple3' },
            { id: 'o2', text: 'Mango3' },
            { id: 'o3', text: 'Banana3' }
        ]
    },
    {
        id: '',
        text: 'Other4',
        children: [
            { id: 'o1', text: 'Apple4' },
            { id: 'o2', text: 'Mango4' },
            { id: 'o3', text: 'Banana4' }
        ]
    }

];

$('#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 == '') {
        e.preventDefault();
        $select.select2('data', $select.select2('data').concat(e.choice.children));
        $select.select2('close');
    }
});

$('#showValue').click(function() {
    $('#output').text($('#fruitSelect').val());
});

jsFiddle

У меня проблема с этим кодом.Когда я выбираю, например, «Mango3», затем прокручиваю к нижней части списка, просто перемещая мышь в области выбора, затем прокрутки автоматически переходят наверх.Есть какое-то исправление?

...