Using BootStrap MultiSelect from http: davidstutz.github.io with TwitterBootstrapMvc

Often there is a requirement to have a drop-down with multi-select. The multi select bootstrap extension from http://davidstutz.github.io/ is excellent and it very easy to integrate with Twitter Bootstrap.

Download the bits from url above an integrate the jquery / css into your MVC application in the normal way.

Simply add an additional class "multiselect" to the existing ListBoxFor extension. For example :

@f.FormGroup().ListBoxFor(m => m.SelectedItem, Model.ItemCollection).Class("multiselect")

Extend TwitterBootstrapMvcJs.js to include something like :

$('.multiselect').multiselect({ includeSelectAllOption: true, includeSelectAllIfMoreThan: 10, maxHeight: 200, enableFiltering: true, enableCaseInsensitiveFiltering: true, filterBehavior: 'text' });

Note: These are just my defaults, it's very configurable and I encourage you to check out the documentation for the extension.