选择2 - 仅显示有限数量的项目，并将其余项目显示为＆＃39; n＆＃39;更多

Question

我已经开始使用Select2了，我发现它对我的需求非常有用。但是，似乎有一个小的设计问题会扰乱页面上的其他元素。当我选择的项目多于指定宽度的项目时，选择框会自动展开。

HTML：

while (true)

JQuery的：

<select id="selector" multiple="multiple">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
    <option value="4">Option 4</option>
    <option value="5">Option 5</option>
    <option value="6">Option 6</option>
    <option value="7">Option 7</option>
</select>

这是我所做的Select2演示的JSFiddle：https://jsfiddle.net/opztx0g5/

以下是截图：

1. 扩张前



1. 扩张后



我发现了这个，但没有找到实现它的方法，



我想知道是否可以选择这样做，这样就不会打扰页面设计。

谢谢！

Answer 1

我宁愿建议您只需设置Dropdown的高度来显示Dropdown。

可以通过以下方式进行CSS更改来完成

 .select2-container .select2-selection--single { height: 33px !important; }

或

.select2-selection { height: auto !important;}

你可以在这里找到你想要的东西 - Tagging with multi-value select boxes

希望它能帮到你!!!!!

Answer 2

我想建议选择Select2，Jquery.sumoselect。

它有一个功能（csvDispCount），可让您显示指定计数后所选项目的数量。

参考http://hemantnegi.github.io/jquery.sumoselect/