jQuery select2 - 为输入和下拉菜单设置不同的宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16519233/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
select2 - Setting different width to input and dropdown
提问by naviram
I am using Select2 3.3.2
我正在使用 Select2 3.3.2
I have very very long options in the select. Example:
我在选择中有很长的选项。例子：
<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>
The purpose is to avoid wrapping of the options when the dropdown opens up.
目的是避免在下拉菜单打开时包装选项。
I would like to set long width for the dropdown when it opens up (for example - 800px, or even automatic evaluated width).
我想在下拉菜单打开时为其设置长宽度（例如 - 800px，甚至自动评估宽度）。
But to keep the input with short width when the dropdown is closed (for example 300px).
但是要在下拉列表关闭时保持输入的宽度较短（例如 300px）。
I followed this "Add option to set dropdown width"issue of select2.
我遵循了 select2 的“添加选项以设置下拉宽度”问题。
But I couldn't get it to work, the width of the options/dropdown is the same as the input's width and the options as wrapped to multiple lines.
但我无法让它工作，选项/下拉菜单的宽度与输入的宽度相同，选项包装为多行。
Here is the demo of my problem in jsfiddle - http://jsfiddle.net/ewwAX/
这是我在 jsfiddle 中的问题的演示 - http://jsfiddle.net/ewwAX/
Thank you all in advance for helping.
预先感谢大家的帮助。
回答by Dave Amphlett
Select2 includes 'dropdownAutoWidth' parameter which uses javascript to attempt to be wide enough for the dropdown contents.
Select2 包括“dropdownAutoWidth”参数，该参数使用 javascript 尝试为下拉内容提供足够宽的宽度。
$('#whatever').select2({dropdownAutoWidth : true});
This at least works with Select2 3.4.3 - I don't know how much earlier it was introduced.
这至少适用于 Select2 3.4.3 - 我不知道它提前多久被引入。
回答by Yeronimo
The property you used is not for controlling the dropdown width. You can use the dropdownCssClassproperty.
您使用的属性不是用于控制下拉宽度。您可以使用该dropdownCssClass物业。
JavaScript:
JavaScript:
$(document).ready(function() {
$("#e1").select2({dropdownCssClass : 'bigdrop'});
});
CSS:
CSS:
.bigdrop {
width: 600px !important;
}
Please note that for more recent versions there is now a better solution! See Dave Amphlett's answer
请注意，对于较新的版本，现在有更好的解决方案！见Dave Amphlett 的回答
回答by Asheeka K P
$("#e1").select2({ width: '100%' });
Try this. This will set the width of container to 100%
尝试这个。这会将容器的宽度设置为 100%
回答by Ron D.
Even better solution. Use:
更好的解决方案。用：
$('#e1').select2({width: 'resolve'});
回答by Yossi Shasho
Here's how to make select2 wider only when its open:
以下是仅在打开时使 select2 变宽的方法：
If you want it to expand towards the right side, add this css:
如果您希望它向右侧扩展，请添加以下 css：
.select2-container.select2-dropdown-open {
width: 170%;
}
if you want it to expand left, add this {
如果您希望它向左扩展，请添加此 {
.select2-container.select2-dropdown-open {
width: 170%;
margin-left: -70%;
}
回答by kimoduor
I used this and it worked perfect, only that it will affect all the select2
我用过这个，效果很好，只是它会影响所有 select2
#select2-drop{
width: 400px !important;
}
回答by Sumit Adak
Try this.
尝试这个。
$(".js-example-basic-single").select2({dropdownAutoWidth : true});
$(".js-example-basic-single").select2({dropdownAutoWidth : true});
