Change option list in bootstrap multiselect dropdown

Question

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.

Answer 1

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

Comments

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.

---

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.

---

here everything works but select all option does not work