jQuery UI MultiSelect Widget cascading dropdown

I have 2 drop downs example country and province. The country can be selected multiple times or only 1, in the latter option the province should have to be populated and this should also be multi-select.

How can I make the second drop down dynamic? When multiselect() method it won't work, I know I need to add the dhtml but I'm still not sure how.

An开发者_如何学Goy help is appreciated.

Thanks, czetsuya

To re-render the second dropdown call refresh on the multiselect element.

$("#myId").multiselect("refresh");

Here's a "rough draft"

http://jsfiddle.net/melee/hWUEg/

Here's the code:

 $(function() {
 $( "#selectable" ).selectable({
     stop: function() {
         var item = $('.ui-selected').text();
         alert(item);
         // .ajax here, probably a get request sending the above item var.
         // Probably want to return JSON, which you can iterate through to create
         // the secondary list. Then inject it into the DOM!
     }
 });
});

So for the sake of keeping things simple, I'm just adding a handler to the stop event - you'll then pull out the values using text or another attr, which you can send via GET to a script that can process it. Send back JSON, then inject into the DOM.