标题所述,有没有一种方法可以强制Select2始终创建下拉框而不是向上弹出框?
还有一些JavaScript代码,当您滚动到下拉框上方时,它会导致翻转,并添加一个名为“select2-drop-above”的新CSS类。
编辑:我应该说明我是通过select2-rails引入库的。我希望有一种方法可以避免直接拉取整个select2库并直接编辑select2.js文件。
标题所述,有没有一种方法可以强制Select2始终创建下拉框而不是向上弹出框?
还有一些JavaScript代码,当您滚动到下拉框上方时,它会导致翻转,并添加一个名为“select2-drop-above”的新CSS类。
编辑:我应该说明我是通过select2-rails引入库的。我希望有一种方法可以避免直接拉取整个select2库并直接编辑select2.js文件。
由于修改源代码不是一个选项,而添加钩子到select2:open
事件也不太优雅,特别是当您在同一页上有多个Select2
实例时,我为Select2
插件编写了一个小扩展。
我的实现受到了来自插件存储库的PR的启发(https://github.com/select2/select2/pull/4618),该PR尚未合并。
基本上,以下代码覆盖了处理下拉列表位置的原始插件函数,并添加了一个新选项(dropdownPosition
)以强制将下拉列表位置设置为上方或下方。
新的dropdownPosition
选项可以使用以下值:
- below
- 下拉列表始终显示在输入框底部;
- above
- 下拉列表始终显示在输入框顶部;
- auto
(默认值)- 使用旧行为。
只需在select2.js
文件之后插入以下代码:
(function($) {
var Defaults = $.fn.select2.amd.require('select2/defaults');
$.extend(Defaults.defaults, {
dropdownPosition: 'auto'
});
var AttachBody = $.fn.select2.amd.require('select2/dropdown/attachBody');
var _positionDropdown = AttachBody.prototype._positionDropdown;
AttachBody.prototype._positionDropdown = function() {
var $window = $(window);
var isCurrentlyAbove = this.$dropdown.hasClass('select2-dropdown--above');
var isCurrentlyBelow = this.$dropdown.hasClass('select2-dropdown--below');
var newDirection = null;
var offset = this.$container.offset();
offset.bottom = offset.top + this.$container.outerHeight(false);
var container = {
height: this.$container.outerHeight(false)
};
container.top = offset.top;
container.bottom = offset.top + container.height;
var dropdown = {
height: this.$dropdown.outerHeight(false)
};
var viewport = {
top: $window.scrollTop(),
bottom: $window.scrollTop() + $window.height()
};
var enoughRoomAbove = viewport.top < (offset.top - dropdown.height);
var enoughRoomBelow = viewport.bottom > (offset.bottom + dropdown.height);
var css = {
left: offset.left,
top: container.bottom
};
// Determine what the parent element is to use for calciulating the offset
var $offsetParent = this.$dropdownParent;
// For statically positoned elements, we need to get the element
// that is determining the offset
if ($offsetParent.css('position') === 'static') {
$offsetParent = $offsetParent.offsetParent();
}
var parentOffset = $offsetParent.offset();
css.top -= parentOffset.top
css.left -= parentOffset.left;
var dropdownPositionOption = this.options.get('dropdownPosition');
if (dropdownPositionOption === 'above' || dropdownPositionOption === 'below') {
newDirection = dropdownPositionOption;
} else {
if (!isCurrentlyAbove && !isCurrentlyBelow) {
newDirection = 'below';
}
if (!enoughRoomBelow && enoughRoomAbove && !isCurrentlyAbove) {
newDirection = 'above';
} else if (!enoughRoomAbove && enoughRoomBelow && isCurrentlyAbove) {
newDirection = 'below';
}
}
if (newDirection == 'above' ||
(isCurrentlyAbove && newDirection !== 'below')) {
css.top = container.top - parentOffset.top - dropdown.height;
}
if (newDirection != null) {
this.$dropdown
.removeClass('select2-dropdown--below select2-dropdown--above')
.addClass('select2-dropdown--' + newDirection);
this.$container
.removeClass('select2-container--below select2-container--above')
.addClass('select2-container--' + newDirection);
}
this.$dropdownContainer.css(css);
};
})(window.jQuery);
使用以下方式初始化插件:
$(document).ready(function() {
$(".select-el").select2({
dropdownPosition: 'below'
});
});
在这里查看示例代码: https://jsfiddle.net/byxj73ov/
Github存储库: https://github.com/andreivictor/select2-dropdownPosition
更新于2019年12月30日
使用最新的Select2版本 (v4.0.12) 查看示例代码: https://jsfiddle.net/g4maj9ox/
你可以直接编辑select2.js
它所说的是
enoughRoomBelow = dropTop + dropHeight <= viewportBottom,
enoughRoomAbove = (offset.top - dropHeight) >= this.body().scrollTop(),
只需更改它为
enoughRoomBelow = true,
enoughRoomAbove = false,
.select-dropdown {
position: static;
}
.select-dropdown .select-dropdown--above {
margin-top: 336px;
}
我曾经找到了一个更简单/更快的解决方案:
$("select").select2({
// Options
}).on('select2:open',function(){
$('.select2-dropdown--above').attr('id','fix');
$('#fix').removeClass('select2-dropdown--above');
$('#fix').addClass('select2-dropdown--below');
});
这很简单,您只需要在打开事件(select2:open)中将 .select2-dropdown--above 更改为 .select2-dropdown--below。
它只能在该事件下起作用,还有许多其他方法可以在选择框打开时更改类。
注意:如果您尝试使用jquery填充选择框,则无法使用此方法。
select2
选项来强制下拉框保持在下方的方法。最终我的解决方案如下:$("#mySelect2").select2({ ...options... })
.on('select2-open', function() {
// however much room you determine you need to prevent jumping
var requireHeight = 600;
var viewportBottom = $(window).scrollTop() + $(window).height();
// figure out if we need to make changes
if (viewportBottom < requireHeight)
{
// determine how much padding we should add (via marginBottom)
var marginBottom = requireHeight - viewportBottom;
// adding padding so we can scroll down
$(".aLwrElmntOrCntntWrppr").css("marginBottom", marginBottom + "px");
// animate to just above the select2, now with plenty of room below
$('html, body').animate({
scrollTop: $("#mySelect2").offset().top - 10
}, 1000);
}
});
更新自[shanabus]的回答
jQuery("#line_item").select2({
formatResult: Invoice.formatLineItem
})
.on('select2-open', function() {
// however much room you determine you need to prevent jumping
var requireHeight = $("#select2-drop").height()+10;
var viewportBottom = $(window).height() - $("#line_item").offset().top;
// figure out if we need to make changes
if (viewportBottom < requireHeight)
{
// determine how much padding we should add (via marginBottom)
var marginBottom = requireHeight - viewportBottom;
// adding padding so we can scroll down
$(".aLwrElmntOrCntntWrppr").css("marginBottom", marginBottom + "px");
// animate to just above the select2, now with plenty of room below
$('html, body').animate({
scrollTop: $("#select2-drop").offset().top - 10
}, 1000);
}
});
.my_select_picker_trigger.dropup .dropdown-menu {
bottom: auto !important;
}