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

【问题标题】：select2 - Setting different width to input and dropdownselect2 - 为输入和下拉设置不同的宽度
【发布时间】：2013-05-07 07:41:36
【问题描述】：

我正在使用 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>

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

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

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

我关注了这个"Add option to set dropdown width" select2 的问题。

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

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

提前感谢大家的帮助。

【问题讨论】：

标签： jquery css select jquery-select2

【解决方案1】：

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

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

这至少适用于 Select2 3.4.3 - 我不知道它是在多早之前引入的。

【讨论】：

适用于 4.0.2。
适用于 4.0.6-rc.1
工作在 4.0.13，谢谢！

【解决方案2】：

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

Here's a demo in jsFiddle.

JavaScript：

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

CSS：

.bigdrop {
    width: 600px !important;
}

请注意，对于更新的版本，现在有更好的解决方案！见Dave Amphlett's answer

【讨论】：

嗨，你能帮帮我吗，我希望下拉菜单应该像你的小提琴一样宽，但是一旦选择它应该回到正常的宽度，无论日期有多宽是
@N.K -- 请参阅下面 Dave Amphlett 的回答。这对我有用。
@N.K 如果您将 jsfiddle 更改为使用 css 类（而不是 id），则将使用 width 属性（用于关闭状态）
no worky here -select2.min.js:1 Uncaught Error: No select2/compat/dropdownCss 有没有办法在最新版本中设置宽度？这让我发疯了

【解决方案3】：

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

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

【讨论】：

这会将容器的宽度设置为 100%
这是唯一对我有用的解决方案（在所有其他解决方案中）。

【解决方案4】：

更好的解决方案。使用：

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

【讨论】：

现在是这样。此选项在提出问题时不可用（2013 年）
我试过了，但它不适合我？你能告诉我为什么吗？
谢谢。这解决了所选框和选项宽度的许多问题。

【解决方案5】：

试试这个。

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

【讨论】：

【解决方案6】：

试试这个。

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

【讨论】：

【解决方案7】：

下面是如何使 select2 仅在打开时变宽：

如果你想让它向右扩展，添加这个 css:

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

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

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

【讨论】：

【解决方案8】：

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

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

【讨论】：

<style> #select2-drop{ width: 400px !important; } </style>
给予它！重要的也可能不会使其响应

【解决方案9】：

这对我有用..

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

【讨论】：