select2 - 为输入和下拉菜单设置不同的宽度 [英] select2 - Setting different width to input and dropdown

问题描述

我使用Select2 3.3.2

I am using 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.

我想为下拉菜单打开时设置长宽度（例如 - 800px，甚至自动计算宽度）。

I would like to set long width for the dropdown when it opens up (for example - 800px, or even automatic evaluated width).

我按照添加选项以设置下拉宽度问题的select2。

I followed this "Add option to set dropdown width" issue of 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.

这里是我的问题的演示在jsfiddle - a href =http://jsfiddle.net/ewwAX/> http://jsfiddle.net/ewwAX/

Here is the demo of my problem in jsfiddle - http://jsfiddle.net/ewwAX/

感谢大家

推荐答案

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

The property you used is not for controlling the dropdown width. You can use the dropdownCssClass property.

这是jsFiddle中的演示 。

JavaScript ：

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

CSS ：

.bigdrop {
    width: 600px !important;
}

这篇关于select2 - 为输入和下拉菜单设置不同的宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！