Change option list in bootstrap multiselect dropdown

+1 vote
asked Jul 26, 2014 in javascript library by andrew

I have two boostrap multiselect dropdowns in my webpage and I want to change the option list of one dropdown based on the item selected in another multiselect dropdown. Option list for the second dropdown should be received fro an ajax call. So, whenever the items selected in the first dropdown I need to make ajax call by passing the selected items from the first dropdown to get the option list for that second dropdown. That result should be populated in the second dropdown.

Share

1 Answer

+1 vote
answered Jul 26, 2014 by Aadhira (1,213 points)
selected Jul 26, 2014 by administrator
 
Best answer

First to find the items selected in the first multiselect dropdown, you need to use "onChange" event, if you are using bootstrap version 2.3 or less. If you are using Bootstrap version 3, then you should be able to use "onDropdownHide" event.

Then difference between "onChange" and "onDropdownHide" is, onChange event will raise event whenever the user select or deselect item in the dropdown. So, the problem is, since you are using mutiselect dropdown, user may select more that one item from the dropdown, which will raise onchange event that may times.

But you use "onDropdownHide" event, it will raise the event after the user completed his selection and come out of that dropdown. That is something like "Leave Focus" event.

The last one is to dynamically change the option list of the dropdown 2. For that, yon can use "dataprovider". That will refresh your option list.

Here is the example for both onChange and onDropdownHide events. Use the one based on your Bootstrap version.

Bootstrap version 2.3 or less

jQuery('#dropdown1').multiselect({
        onChange: function(element, checked) {
            FillDropdown2(jQuery('#dropdown1').val());
        }
    });

Bootstrap verion 3 and above

jQuery('#dropdown1').multiselect({
    onDropdownHide: function(event) {
        FillDropdown2(jQuery('#dropdown1').val());
    }
});

Ajax Call

var FillDropdown2 = function(selectedVal)
{
    if(jQuery.isEmptyObject(selectedVal))
    {
        return;
    }

    //To clear existing items
    jQuery('#dropdown2').multiselect('dataprovider', []);


    jQuery.post(
            url,
            {options: selectedVal},
    function(data)
    {
        var result = jQuery.parseJSON(data);

        var dropdown2OptionList = [];
        jQuery.each(result, function(i, item)
        {
            dropdown2OptionList.push({
                    'label': item['name'],
                    'value': item['id']
                })
        });

        jQuery('#dropdown2').multiselect('dataprovider', dropdown2OptionList);
        jQuery('#dropdown2').multiselect({
            includeSelectAllOption: true
        });
    });
}
commented Jul 21, 2015 by Alice
Hi.. Nice answer. But i have one doubt. How to prevent filling of second dropdown when first drop down is just simply opened and closed without performing any onchange event on the first drop down.
Thanks in advance.
commented Jul 21, 2015 by Raja
Alice, you may need to compare the previously selected values and the current selected values, before making the ajax call. If the values are different then call ajax method to fill the second dropdown. Otherwise drop it.
commented Oct 10, 2016 by aYUSH

here everything works but select all option does not work

Your answer

Preview

Your name to display (optional):
Privacy: Your email address will only be used for sending these notifications.
Anti-spam verification:
To avoid this verification in future, please log in or register.
site design / logo / content © 2013 - 2015 pinfaq.com
...