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

Looking for multi-select, scrollable, List component for Bootstrap

提问by fumeng

I can't find a scrollable, multi-select List component for Bootstrap; anybody know of one?

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

Select2 components are great but I want the list expanded at first, not a dropdown.

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

Bonus if it works handily with Text input component for searching/filtering.

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

Thanks for any helpful tips!

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

回答by karthikr

If you are looking for a 2 column select layout, check this out

如果你正在寻找一个2列选择布局，检查了这一点

If you are looking for a multiselect dropdown - Check hereand here

如果您正在寻找多选下拉菜单 - 检查这里和这里

回答by saad

To make the dropdown scrollable add the following css

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

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

回答by cbezares4

Bootstrap Dual Listboxuse two lists to manage the selections.

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

In your HTML doc:

在您的 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>

In your JS script:

在您的 JS 脚本中：

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

Which results in: Image

结果是： 图像

回答by Pavel Voronin

I've recently created very simple jQuerUI pluginwhich mimics multiselection functionality by toggling .activeclass on the elements.

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

$(selector).multiselect("selection")

returns an array of indices of the children elemens having class .active.

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

Scrolling and other styling is done by applying corresponding CSS.

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