Jquery 选择2-设置不同的输入宽度并下拉

我正在使用Select2 3.3.2

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

阿拉巴马州
怀俄明州
很长的文本
长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长长的文字

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

我想在下拉列表打开时设置长宽度（例如-800px，甚至自动计算宽度）

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

我关注了这期select2

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

下面是我在JSFIDLE中遇到的问题的演示-

---

提前感谢您的帮助。

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

dropdownCssClass

属性

JavaScript：

$（文档）.ready（函数（）{
$（“#e1”）。选择2（{dropdownCssClass:'bigdrop'}）；
});

CSS：

.bigdrop{
宽度：600px！重要；
}

---

请注意，对于较新版本，现在有了更好的解决方案！请参阅

选择2包含'dropdownAutoWidth'参数，该参数使用javascript尝试使下拉内容足够宽

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

---

这至少适用于Select2 3.4.3-我不知道它的推出时间有多早。

以下是如何使Select2仅在打开时变宽：

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

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

如果希望它向左展开，请添加以下内容{

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

---

我使用了它，它工作得非常完美，只是它会影响所有的

select2

#选择2下拉{
宽度：400px！重要；
}

更好的解决方案。使用：

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

试试这个。

---

这将把容器的宽度设置为100%

试试这个

$（“.js示例基本单”）。选择2（{dropdownAutoWidth:true}）；

这对我来说很有效

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

试试这个

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

您好，您也能帮帮我吗？我希望下拉列表的宽度应与您的小提琴一样宽，但一旦选中，无论日期有多宽，它都应恢复到正常宽度is@N.K--请参阅下面Dave Amflett的回答。这对我很有用。@N.K如果您将JSFIDLE更改为使用css类（而不是id），则可以width属性将被使用（对于关闭状态）此处无工作-select2.min.js:1未捕获错误：无select2/compat/dropdownCss在最新版本中无法设置宽度？这让我发疯

#select2 drop{width:400px！重要；}

给予它！重要的可能也不会让它做出反应现在这是真的。在提出问题时，此选项不可用（2013年）我已经试过了，但它对我不起作用？你能告诉我为什么吗？谢谢。这解决了所选框和选项宽度的许多问题。在4.0.2中有效。在4.0.6-rc.1中有效。在4.0.13中有效，谢谢！这将容器宽度设置为100%。这是唯一对我有效的解决方案（在所有其他解决方案中）。

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

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