Select2更改容器位置 [英] Select2 change container position

问题描述

如何调整Select2容器的位置，以使搜索框位于该网站上原始选择元素的正上方

How can I adjust the position of Select2 container so that the search box is position right over the original select element like in this website

http://www.jobnisit.com/cn

我认为UI看起来更干净.

It look cleaner in terms of UI in my opinion.

Ps.抱歉，我现在无法发布图片.

Ps. sorry, I can't post the image now.

推荐答案

有两种方法可以做到这一点.

There is 2 ways to do this.

1)使用CSS:

.select2-dropdown--below {
    top: -2.8rem; /*your input height*/
}

这不会影响容器(.select2-container)，但会移动下拉列表和搜索字段，因此您将获得理想的效果.

This will not affect a container (.select2-container), but will move dropdown and search field, so you will have a desired effect.

2)使用js:

$('select').select2().on('select2:open', function() {
  var container = .$('.select2-container').last();
  /*Add some css-class to container or reposition it*/
});

此代码将处理程序附加到"select2:open"事件，该事件将在每次用户打开下拉菜单时触发.如果页面上有多个选择，则此方法更好.

This code attaches a handler to 'select2:open' event, which will be fired every time when user opens a dropdown. This method is better if you have more than one select on page.

通过select2 4.0.0测试

Tested with select2 4.0.0

这篇关于Select2更改容器位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！