Chosen select an option by default with jQuery

Question

I have one select box with options and I am using jQuery "Chosen" on a Zend View. This plugin is working fine.

Javascript:
$('#select_type').chosen();

My problem is I need to select one of the options when the page loads depending on what the value of type_id is. I tried this:

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

This changes its value but the option is not selected in the JQuery chosen.

Any ideas?

EDIT: The option successfully changes by doing what I have mentioned above but it does not update/change the selected element in jQuery "chosen" plugin. My question is about updating the selected value for jQuery Chosen not the HTML SELECT (which I have done successfully). Here is a link to jQuery Chosen plugin

Isn't this two separate problems? The jQuery provided has nothing to do with the value, and vice versa. — Grim..., Feb 06 '12 at 13:45

Treffynnon · Accepted Answer · 2013-08-15T12:26:50.153

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.

This is great! I needed to make a `change()` operate on the DOM, but have the ` — Conrad.Dean, Feb 16 '12 at 16:21
Starting with version 1.0 which the trigger is now "chosen:updated". See http://harvesthq.github.io/chosen/#change-update-events — Tony, Aug 07 '13 at 21:30
@Tony thank you for mentioning that. I have updated my answer to reflect these changes to their API. — Treffynnon, Aug 15 '13 at 12:27

Benjamin Crouzier · Answer 2 · 2016-11-11T21:02:28.807

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.

score 3 · Answer 3 · edited Sep 02 '13 at 10:04

3

Try this:

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

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

edited Sep 02 '13 at 10:04

nhahtdh

55,989
15
126
162

answered Sep 02 '13 at 09:59

vam

112
13

score 2 · Answer 4 · answered Feb 06 '12 at 13:55

2

Try this:

$('#select_type').val('<?=$this->type_id;?>'); // Select the value before .chosen();
$('#select_type').chosen();

answered Feb 06 '12 at 13:55

phatskat

1,797
1
15
32

score 0 · Answer 5 · edited Feb 06 '12 at 15:26

0

$('#select_type').val('<?=$this->type_id?>');

try it

edited Feb 06 '12 at 15:26

kapa

77,694
21
158
175

answered Feb 06 '12 at 13:53

yapingchen

836
5
4

Thanks yapingchen but I know how to set an option selected I needed selection in the plugin i mentioned above – ShayanK Feb 06 '12 at 14:18
$('#select_type').val('=$this->type_id?>'); – yapingchen Feb 08 '12 at 01:22

score -2 · Answer 6 · edited Feb 10 '18 at 02:25

-2

Try the following:

$("#choen-presentacion").val(value.id_presentacion).trigger('chosen:updated')

edited Feb 10 '18 at 02:25

Vinicius Placco

1,683
2
14
24

answered Feb 10 '18 at 00:19

José Diaz

1

Chosen select an option by default with jQuery

6 Answers6

Update list with JS

For Chosen version 1 and above (newer)

For Chosen versions below 1 (older)

Set the value before calling Chosen

Linked