为 Bootstrap 寻找多选、可滚动、列表组件答案

【问题标题】：Looking for multi-select, scrollable, List component for Bootstrap为 Bootstrap 寻找多选、可滚动、列表组件
【发布时间】：2020-06-29 00:40:53
【问题描述】：

我找不到 Bootstrap 的可滚动、多选列表组件；有人知道吗？

Select2 组件很棒，但我希望首先扩展列表，而不是下拉列表。

如果它与文本输入组件一起用于搜索/过滤，则可以很方便地使用。

感谢您提供任何有用的提示！

【问题讨论】：

标签： javascript html twitter-bootstrap

【解决方案1】：

如果您正在寻找 2 列选择布局，请查看 this out

如果您正在寻找多选下拉菜单 - 请查看 here

【讨论】：

不错的组件，但我们设计师的模型显示的是列表组件，而不是下拉列表。
第二个和第三个链接可以做到这一点
也许我在网站上的演示示例中没有看到它，但该组件的所有内容都基于选择输入。意思是，要触发查看列表，您必须单击选择。我正在寻找一个 JSP 页面，该页面显示一个已经展开的列表组件 (Flex) 或网格/表格 (HTML)。

【解决方案2】：

要使下拉菜单可滚动，请添加以下 css

.multiselect-container {
    height: 200px;  
    overflow-x: hidden;
    overflow-y: scroll;  
}

【讨论】：

【解决方案3】：

Bootstrap Dual Listbox 使用两个列表来管理选择。

在您的 HTML 文档中：

<select name="duallistbox[]" multiselect>
    <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="10">Option 10</option>
</select>

在你的 JS 脚本中：

$('select[name="duallistbox[]"]').bootstrapDualListbox();

这会导致： Image

【讨论】：

【解决方案4】：

我最近创建了非常简单的 jQuerUI plugin，它通过在元素上切换 .active 类来模拟多选功能。

$(selector).multiselect("selection")

返回具有 .active 类的子元素的索引数组。

滚动和其他样式是通过应用相应的 CSS 来完成的。

【讨论】：