CODEWITHSUNDEEP
jqueryforms
Ceasar
Ceasar

Reputation: 23083

How do I dynamically change a Chosen select box?

I'm using the Google Maps API to create a list of selectable neighborhoods and using Chosen to make it look nice. The problem that I'm having is the the Maps API doesn't get the data immediately- it does it via callback functions, which means that Chosen applies itself before the options are added, and as a result the options don't get run through Chosen (resulting in them not showing up at all).

I think in theory, it should work if I can just get the elements in the select before Chosen is applied, but I'm not sure how to do that exactly. Any thoughts?

Upvotes: 7

Views: 18893

Answers (2)

Vikas Burman
Vikas Burman

Reputation: 355

For chosen version < 1.0 then:

$("#form_field").trigger("liszt:updated");

For chosen version >= 1.0 then:

$("#form_field").trigger("chosen:updated");

Upvotes: 4

Christian
Christian

Reputation: 19740

Did try what the docs suggest?

Updating Chosen Dynamically

If you need to update the options in your select field and want Chosen to pick up the changes, you'll need to trigger the "liszt:updated" event on the field. Chosen will re-build itself based on the updated content.

jQuery Version: $("#form_field").trigger("liszt:updated");
Prototype Version: Event.fire($("form_field"), "liszt:updated");

Or, if using a newer version:

jQuery Version: $("#form_field").trigger("chosen:updated");
Prototype Version: Event.fire($("form_field"), "chosen:updated");

http://harvesthq.github.com/chosen/

Upvotes: 19

Related Questions