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，甚至是自动评估的宽度）。

但是当下拉列表关闭时（例如300px）保持输入的宽度较短。

我遵循了"Add option to set dropdown width"问题的select2。

但我无法使其工作，选项/下拉列表的宽度与输入的宽度相同，选项包含在多行中。

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

感谢大家提前帮忙。

Answer 1

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

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

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

Answer 2

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

Here's a demo in jsFiddle

<强>的JavaScript ：

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

<强> CSS ：

.bigdrop {
    width: 600px !important;
}

Answer 3

更好的解决方案。使用：

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

Answer 4

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

尝试一下。这会将容器的宽度设置为100％

Answer 5

尝试一下。

$（“。js-example-basic-single”）。select2（{dropdownAutoWidth：true}）;

Answer 6

以下是如何使select2仅在打开时更宽：

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

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

如果您想要向左展开，请添加此{

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

Answer 7

试试这个。

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

Answer 8

这对我有用。

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

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

8 个答案: