Jquery 选择2：控制要显示的选项数

我有一个选择框，显示了大约7个选项。如何使

选择2

显示更多选项

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

A1A2C1
C2C3E1
E2G1G2

---

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

尝试添加多重和大小属性

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

A1A2C1
C2C3E1
E2G1G2

这起作用了：

html:

---

如果您希望只显示比默认选项更多的选项，而不让它看起来很糟糕，那么我刚刚编写了一个jQuery插件（）来实现这一点。查看GitHub页面（链接）上的屏幕截图，了解它在不同页面布局情况下的行为

---

希望这对别人有帮助

所有select2容器可以获得相同的高度

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

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

---

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

---

因此，您可以使用配置

下拉cssclass

来传递css类

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

---

首先你应该关闭你的选择标签。。。使用

ctrl+click

size

不会影响select2。在新的select2-version 4中，

max height

设置为类

的内部元素。select2-results\u options

，因此应该被替换。PS：查看select2插件CSS文件，另一种方法是使用css selectior:

.select2容器--引导.select2结果>.select2结果选项

{max height:400px；}（请注意，此插件仅为select2 v4.x.x构建。）

.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);

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

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

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