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

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

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

Thanks for any helpful tips!

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

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

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

Thanks for any helpful tips!

• javascript
• html
• twitter-bootstrap

4 Answers 4

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

If you are looking for a multiselect dropdown - Check here

To make the dropdown scrollable add the following css

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

Bootstrap Dual Listbox use two lists to manage the selections.

In your HTML doc:

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

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

Which results in: Image

I've recently created very simple jQuerUI plugin which mimics multiselection functionality by toggling .active class on the elements.

$(selector).multiselect("selection")

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

Scrolling and other styling is done by applying corresponding CSS.