jquery - select2 - 为输入和下拉设置不同的宽度

Question

我正在使用 Select2 3.3.2

我在选择中有很长的选项。例子：

<select id="e1">
<option value="AL">Alabama</option>
<option value="WY">Wyoming</option>
<option value="WY">very long long long text</option>
<option value="WY">very long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long text</option>
</select>

目的是避免在打开下拉菜单时包装选项。

我想在下拉菜单打开时为其设置长宽度（例如 - 800px，甚至自动评估宽度）。

但是要在关闭下拉菜单时保持输入宽度较短（例如 300 像素）。

我遵循了 select2 的“添加选项以设置下拉宽度”问题。

但我无法让它工作，选项/下拉列表的宽度与输入的宽度相同，并且选项被包裹到多行。

这是我在 jsfiddle 中的问题的演示 - http://jsfiddle.net/ewwAX/

提前感谢大家的帮助。

score 106 · Accepted Answer

Select2 包含“dropdownAutoWidth”参数，该参数使用 javascript 来尝试使下拉内容足够宽。

$('#whatever').select2({dropdownAutoWidth : true});

这至少适用于 Select2 3.4.3 - 我不知道它被引入了多早。

score 68 · Accepted Answer

您使用的属性不是用于控制下拉宽度。您可以使用该dropdownCssClass物业。

这是 jsFiddle 中的演示。

JavaScript：

$(document).ready(function() { 
    $("#e1").select2({dropdownCssClass : 'bigdrop'}); 
});

CSS：

.bigdrop {
    width: 600px !important;
}

请注意，对于更新的版本，现在有更好的解决方案！见戴夫·安弗莱特的回答

score 13 · Accepted Answer

13

$("#e1").select2({ width: '100%' });

尝试这个。这会将容器的宽度设置为 100%

于 2018-09-17T11:20:55.970 回答

score 9 · Accepted Answer

9

更好的解决方案。利用：

$('#e1').select2({width: 'resolve'});

于 2015-09-15T09:20:27.380 回答

score 4 · Accepted Answer

4

尝试这个。

$(".js-example-basic-single").select2({dropdownAutoWidth : true});

于 2020-01-19T06:54:55.227 回答

score 3 · Accepted Answer

3

尝试这个。

<select id="e1" data-width="100%">

于 2021-04-06T12:55:46.680 回答

score 2 · Accepted Answer

以下是仅在 select2 打开时使其更宽的方法：

如果您希望它向右侧扩展，请添加以下 css：

  .select2-container.select2-dropdown-open {
    width: 170%;
  }

如果你想让它向左扩展，添加这个 {

  .select2-container.select2-dropdown-open {
    width: 170%;
    margin-left: -70%;
  }

score 1 · Accepted Answer

我用了这个，效果很好，只是它会影响所有select2

#select2-drop{
    width: 400px !important;
}

score 0 · Accepted Answer

这对我有用..

 .select2-container--krajee .select2-dropdown--below{
    width:230px !important;
    margin-left: -70px !important;
}

jquery - select2 - 为输入和下拉设置不同的宽度

9 回答 9

Related

Reference