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