我有一个select2下拉菜单,我想保持打开状态以便用户可以多选。
问题是,当用户选择位于底部某个位置的菜单项时,该菜单项被选中,但是滚动位置移开了。
$('#example').select2({
placeholder: 'Select a month',
closeOnSelect:false
});
列表很大,用户会搜索关键字。用户应该能够选择所有包含关键字的项目。但是现在,当选择一个项目时,滚动条将移动到第一个位置。
https://jsfiddle.net/3x9Lh5kt/
例如,尝试在列表中选择“十二月”,滚动会稍微向上移动,而我希望它保持在同一位置。
要实现该目标应该怎么做。
答案 0 :(得分:3)
使用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>