Question

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

http://www.jobnisit.com/en

在我看来，它在UI方面看起来更干净。

聚苯乙烯。抱歉，我现在无法发布图片。

Answer 1

定位下拉列表的正确方法是使用select2插件提供的核心功能。

它为我们提供了'dropdownParent＆＃39;要放置在特定元素内的属性的属性

选择字段：#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')}
 );

Answer 2

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

1）用css：

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

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

2）使用js：

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

此代码将处理程序附加到＆＃39; select2：open＆＃39;每次用户打开下拉列表时都会触发该事件。如果页面上有多个选择，则此方法更好。

使用select2 4.0.0进行测试

选择2更改容器位置

2 个答案: