选择2 - 仅显示有限数量的项目，并将其余项目显示为“更多”

Question

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

HTML：

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

JQuery的：

$(document).ready(function() {
    $("#selector").select2({
        placeholder: 'Select an option',
        width: 'resolve',
        dropdownAutoWidth: 'true',
        allowClear: 'true'
    });
});

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

以下是截图：

1. 在扩张之前

2. 扩张后

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

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

谢谢！

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/