Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Boostrap multiselect select all checked by default

i use bootstrap-multiselect (v0.9.8) with option

 includeSelectAllOption: true 

it is posible that select all to be checked by default when page is loaded?

thx.

like image 367
7MEU Avatar asked Oct 23 '14 10:10

7MEU


People also ask

How can I select all options of multi select select box on click?

Windows: We need to hold down the CTRL button to select multiple options.

How do I select multiple options in bootstrap?

Bootstrap Multiselect is a jQuery based plugin that allows users to tick multiple options from a standard Bootstrap select. Its implementation is quite simple, and in exchange brings a lot of UX value. Examples of Bootstrap Multiselect use: Ingredient choice within a pizza delivery system.

How do you use multi select?

Multiple items are selected by holding down SHIFT and clicking them with the mouse or by holding down SHIFT and pressing an arrow key to extend the selection from the previously selected item to the current item. You can also select items by dragging with the mouse.

How do I create a custom multi selection?

Click the blue 'Add Field' button. In the pop-up window that appears, make sure the 'Create new field' checkbox is checked, and choose 'Multi-Select Field' from the 'Type' drop-down menu. Give your field a name, and click 'Create Field.


1 Answers

The following is taken from http://davidstutz.github.io/bootstrap-multiselect/, and I am currently using this solution with bootstrap 3.3.1 and bootstrap-multiselect v0.9.8 Be sure to add the false parameter to the 'selectAll' function as that permits you to select all the options without first opening the dropdown.

Example HTML:

<select class="multiselect" id="my-multi-select" name="options[]" multiple="multiple">
    <option>1</option>
    <option>2</option>
</select>

Example javascript:

$(function() {

    $('#my-multi-select').multiselect({
        includeSelectAllOption: true
    });

    $("#my-multi-select").multiselect('selectAll', false);
    $("#my-multi-select").multiselect('updateButtonText');

});
like image 85
noahpc Avatar answered Sep 16 '22 20:09

noahpc