javascript - 为 Bootstrap 寻找多选、可滚动、列表组件

Question

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

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

如果它可以与文本输入组件一起使用以进行搜索/过滤，则会得到奖励。

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

Answer 1

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

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

Answer 2

要使下拉列表可滚动，请添加以下 css

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

Answer 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();

结果是： 图像

Answer 4

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

$(selector).multiselect("selection")

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

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