Chosen select an option by default with jQuery

Update list with JS

After you run:

document.getElementById('select_type').value = '<?=$this->type_id?>';

For Chosen version 1 and above (newer)

You should call:

$('#select_type').trigger('chosen:updated');

Taken from the Chosen documentation:

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 "chosen:updated" event on the field. Chosen will re-build itself based on the updated content.

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

See the change log for the announcement of this API change.

For Chosen versions below 1 (older)

You should call:

$('#select_type').trigger('liszt:updated');

Taken from the Chosen documentation:

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");

Set the value before calling Chosen

Instead of doing this from JS why don't you just set the selected option in the HTML before calling the Chosen plugin with JavaScript? You are setting the value from a piece of PHP so I don't see why this couldn't be done.

You can just set the correct elements with the attribute selected like so:

<select name="teams[]" data-placeholder="Chose an option:"         class="chzn-select" multiple tabindex="6">    <option value=""></option>    <option selected="selected">Dallas Cowboys</option>    <option selected="selected">New York Giants</option>    <option>Philadelphia Eagles</option>    <option>Washington Redskins</option></select>

Chosen will take care to initialize itself and show the two pre-selected choices.

Try this:

$("#select_type").val(<?=$this->type_id?>).trigger('change');$('#select_type').trigger('liszt:updated');