Looks for multi-select, scrollable, list component for bootstrap

Question

I can't find a scrollable, multi-selectable List component for Bootstrap; Does anyone know about one?

Select2 elements are great, but first I want the list to be expanded, not a drop-down list.

A bonus if it conveniently works with the text input component for search / filtering.

Thanks for the helpful tips!

Answer 1

If you are looking for a two-column layout, check this box.

If you are looking for a multi-select drop-down list, check here and here.

Answer 2

To make the scroll scroll add the following css

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

Answer 3

I recently created a very simple jQuerUI plugin that mimics multi-segment functionality by switching the .active class to elements.

 $(selector).multiselect("selection") 

returns an array of indices of children that have the .active class.

Scrolling and other styles are done using the appropriate CSS.

Answer 4

Bootstrap Dual Listbox uses two lists to manage selections.

In your HTML document:

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

The result is: Image