Question

我有一个显示约7个选项的选择框。如何让select2显示更多选项？

<td class="span4"><select id="tec" class="span4"><option></option>
    <option>A1</option><option>A2</option><option>C1</option>
    <option>C2</option><option>C3</option><option>E1</option>
    <option>E2</option><option>G1</option><option>G2</option>
    </select>
</td>

这是关于显示更多选择，而不是选择

Answer 1

这有效：

HTML：

<select class="bigdrop">

jquery的：

$(".bigdrop .select2-results").css("max-height","400px");

Answer 2

如果你只想显示比默认选项更多的选项而不看起来很糟糕，我只是写了一个jQuery插件（maximize-select2-height）来完成这个。查看GitHub页面（链接）上的屏幕截图，了解它在不同页面布局情况下的行为。

希望这对某人有帮助！

Answer 3

所有select2容器都可以具有相同的高度。

我刚刚添加了这种样式，它对我有用

.select2-container--default .select2-results > .select2-results__options {
    max-height: 400px;
}

Answer 4

我不认为动态设置选择框的大小是个好主意。它可以使你的整个设计看起来很糟糕。如果您不确定要在选择中显示的选项数量，我建议您使用下拉框。但无论如何，如果您确定要做什么，Tomas最近给出的答案可以做得很好。一切顺利： - ）

Answer 5

如果页面中有多个Select2元素，则可能希望每个Select2元素具有不同的最大项目限制。

我写了一个 Less.js 实现，您可以在其中生成要列出为css类的项目

注意：您应该在下拉菜单中检查字体的基本高度。在此示例中，36px用作下拉列表中一项的高度。

.generate-s2-maxheight(@n:6, @base-height:36px, @i:1) when (@i < @n) {
    
    .select2-container--default .s2-mh-@{i} .select2-results>.select2-results__options 
    {
        max-height: (@base-height * @i) !important;
    }

    // Iterate to the next css generation until it reaches to @n
    .generate-s2-maxheight(@n, @base-height, (@i+1));
}
    
// Generation of css classes for item limitation from 1 to 9 items (10 is excluded)
//
.generate-s2-maxheight(10);

示例CSS可以在下拉菜单中显示5个项目：

    .select2-container--default .s2-mh-5 .select2-results>.select2-results__options {
        max-height: 180px !important;
    }

因此，您可以使用配置dropdownCssClass来传递css类

 $("<SELECT2_CLASS_OR_ID>").select2({
     dropdownCssClass: "s2-mh-<NUM_OF_ITEMS_TO_SHOW>"
 });

示例：

 $(".select2").select2({
     dropdownCssClass: "s2-mh-5"
 });
`

Answer 6

尝试添加多个和尺寸属性

<td class="span4">
    <select id="tec" class="span4" size="10" multiple="multiple">
       <option></option>
       <option>A1</option><option>A2</option><option>C1</option>
       <option>C2</option><option>C3</option><option>E1</option>
      <option>E2</option><option>G1</option><option>G2</option>
    </select>
</td>

select2：控制要显示的选项数量

6 个答案: