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,甚至自动评估宽度).

但是在下拉菜单关闭时保持输入的宽度较短(例如300px).

我按照select2的"添加选项来设置下拉宽度"问题.

但我无法使它工作,选项/下拉列表的宽度与输入的宽度和包装到多行的选项相同.

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

感谢大家提前帮忙.

Answer 1

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

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

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

Answer 2

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

这是jsFiddle的演示.

JavaScript:

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

CSS:

.bigdrop {
    width: 600px !important;
}

Answer 3

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

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

Answer 4

更好的解决方案.使用:

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

Answer 5

尝试这个。

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