Select2 改变容器位置

Question

如何调整 Select2 容器的位置，使搜索框位于原始 select 元素的正上方，就像本网站中那样

http://www.jobnisit.com/en

在我看来 UI 看起来更干净。

Ps。抱歉，我现在无法 post 图片。

Answer 1

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

1) css:

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

这不会影响容器（.select2-容器），但会移动下拉列表和搜索字段，因此您会得到预期的效果。

2) 使用 js:

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

此代码将处理程序附加到 'select2:open' 事件，每次用户打开下拉菜单时都会触发该事件。如果您在页面上有多个 select。

，则此方法更好

使用 select2 4.0.0

测试

Answer 2

放置下拉菜单的正确方法是使用 select2 插件提供的核心功能。

它为我们提供了 'dropdownParent' 属性以放置到特定元素内的下拉列表

select 字段：#edit-field-job-skillsets-tid

父项：div.form-item-field-job-skillsets-tid

jQuery("#edit-field-job-skillsets-tid").select2(
  {dropdownParent: jQuery('div.form-item-field-job-skillsets-tid')}
 );

Select2 改变容器位置

Select2 change container position

jquery-select2