HTML.form.guide

How to create a dropdown with checkbox options with Bootstrap Style

checkbox bootstrap css multiselections dropdown

Suppose you want to allow your users to select multiple options. However, you want to display the options just like a dropdown. The HTML built-in dropdown box has a multiple option; but most users are unaware of how to select multiple options from such a list.

Here is a jQuery component to your rescue: Bootstrap MultiSelect.

Bootstrap checkbox dropdown

The sample code to set up a dropdown box:

<select name="ingredients[]" id="ingredients" multiple="multiple">
    <option value="cheese">Cheese</option>
    <option value="tomatoes">Tomatoes</option>
    <option value="mozarella">Mozzarella</option>
    <option value="mushrooms">Mushrooms</option>
    <option value="pepperoni">Pepperoni</option>
    <option value="onions">Onions</option>
</select>

$(document).ready(function() {
        $('#ingredients').multiselect();
    });

You can find the documentation for this jQuery component here: Bootstrap Multiselect

See Also

Categories