jquery - select2：控制显示多少选项

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

所有 select2 容器都可以设置为相同的高度。

我刚刚添加了这种风格，它对我有用

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

Answer 3

如果您希望只显示比默认选项更多的选项，而不会看起来很糟糕，我只是编写了一个 jQuery 插件（maximize-select2-height）来做到这一点。查看 GitHub 页面（链接）上的屏幕截图，了解它在不同页面布局情况下的表现。

希望这对某人有帮助！

Answer 4

如果您的页面中有多个 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);

在下拉列表中显示 5 个项目的示例 CSS：

    .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 5

尝试添加多个和大小属性

<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>