How do I dynamically change a Chosen select box?

Question

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?

Answer 1

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/

Answer 2

For chosen version < 1.0 then:

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

For chosen version >= 1.0 then:

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