select2 - не прокручивать при выборе - PullRequest
Новая
       3

select2 - не прокручивать при выборе

2 голосов
/ 07 марта 2019

У меня есть выпадающий список select2, который я хотел бы оставить открытым, чтобы пользователь мог выбрать несколько элементов.

Проблема в том, что когда пользователь выбирает пункт меню, который находится где-то внизу, этот элемент выбирается,но позиция прокрутки уходит. 

$('#example').select2({
    placeholder: 'Select a month',
    closeOnSelect:false
});

Список большой, и пользователь будет искать ключевое слово.Пользователь должен иметь возможность выбрать все элементы, содержащие ключевое слово.Но теперь, когда выбран один элемент, прокрутка перемещается в первую позицию.

https://jsfiddle.net/3x9Lh5kt/

Например, попробуйте выбрать в списке декабрь, прокрутка переместится немного выше, тогда какЯ бы хотел, чтобы он оставался в том же положении.

Что нужно сделать, чтобы этого добиться.

1 Ответ

3 голосов
/ 07 марта 2019

Решение, использующее select2:selecting событие 

$('#example').select2({
  placeholder: 'Select a month'
}).on('select2:selecting', function(e) {
  var cur = e.params.args.data.id;
  var old = (e.target.value == '') ? [cur] : $(e.target).val().concat([cur]);
  $(e.target).val(old).trigger('change');
  $(e.params.args.originalEvent.currentTarget).attr('aria-selected', 'true');
  return false;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://rawgit.com/select2/select2/master/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://rawgit.com/select2/select2/master/dist/js/select2.js"></script>

<select id="example" multiple="multiple" style="width: 300px">
  <option value="JAN">January</option>
  <option value="FEB">February</option>
  <option value="MAR">March</option>
  <option value="APR">April</option>
  <option value="MAY">May</option>
  <option value="JUN">June</option>
  <option value="JUL">July</option>
  <option value="AUG">August</option>
  <option value="SEP">September</option>
  <option value="OCT">October</option>
  <option value="NOV">November</option>
  <option value="DEC">December</option>
</select>

К вашему сведению, уже доступно несколько выпусков 4417 , 5022 на github

...