Search jQuery

jQuery Forum

bill.jque..

jQuery UI MultiSelect Widget--Ajax Select Options?

in Using jQuery Plugins • 1 year ago

I am trying to create a dropdown multiple select list using the jQuery UI MultiSelect Widget and populating the option list with an ajax call.

The MultiSelect works great by itself but my attempt to bring in the options with Ajax results in no select options being shown.

For the ajax I am using the jquery.selectboxes.js plugin and the code looks like this:

$('#example').multiselect({selectedList: 4}) // 0-based index;
$('#example').ajaxAddOption("selectbox.php");
$('#example').multiselect('refresh');

That creates a blank multiselect dropdown. I have tried doing the ajax call first. Nothing. (the ajaxAddOptions works fine by itself.). The addoptions calls the php script which does its stuff and returns a jSon file with the data for the select options items.

I think my questions are:

1. Are the two plugins probably incompatible?

2. If compatible, what is the secret to make them work?

3. If incompatible, is there some other way (plugin or not) to populate the multiselect drop-down with the options using Ajax?

Thanks.

Bill

schmakt

Re: jQuery UI MultiSelect Widget--Ajax Select Options?

1 year ago

I was having this same problem... I wasn't really able to fix it, but I was able to get around it by just applying the multiselect widget to the <select> element after changing updating the option list.

So, initially I just have a <span> that says "Select [previous field]"...
when the previous field is selected, I run my ajax call, get the values I need, create the options, add them to the <select> element, hide the <span>, show the <select>, then apply the multiselect.

I'm responding on a different computer from the one on which I have my code, but if it would help anyone to see it, just lmk, and I'll be happy to post once I get to a place with a better connection.

Hope that helps...
-jim