CODEWITHSUNDEEP
jquery
czetsuya
czetsuya

Reputation: 5063

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.

Any help is appreciated.

Thanks, czetsuya

Upvotes: 0

Views: 3842

Answers (2)

czetsuya
czetsuya

Reputation: 5063

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

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

Upvotes: 2

Nic
Nic

Reputation: 13733

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.

Upvotes: 1

Related Questions