Chosen: Set selected value with javascript

Try my branch (https://github.com/tompaton/chosen) it may fix this for you.

Unfortunately it does not work for me.

You need to manually trigger the change event (no way around this as far as I know, which is annoying...):

$("#single_example").val(2).trigger("change");

Thank you, this works perfectly!

I did the example that to you show with error, but when I do $("#single_example").val(2).trigger("change");
, I don't have any change in the list(selected value).
I'm using the last version of plugin.
Greets

You'll need to use https://github.com/tompaton/chosen, it hasn't been merged into the harvesthq branch.

Yes it works like charm after using tompaton branch.

$("#single_example1").val(2);
$("#single_example2").val(3)
...
$("#single_example3").val(20);
$('.chosen').trigger('change');

Hi guys, I downloaded the tompaton's fork (https://github.com/tompaton/chosen) I did:
$("#single_example").val(2).trigger("change");
A this works like a charm
Thxs for advice :-)

I'm trying to write a clear all function and this doesn't seem to work, even using the tompaton branch:
$(".state_list").val("").trigger("change");

I have an empty option:
```

Alabama
Alaska
Arizona
...
West Virginia
Wisconsin
Wyoming

Is there a way to totally remove all selections? Also how about selecting all?

Sorry, my patch didn't address multiple-select boxes, that'll require
a fair bit more code ...

On Fri, Aug 12, 2011 at 1:50 AM, MB34
[email protected]
wrote:

I'm trying to write a clear all function and this doesn't seem to work, even using the tompaton branch:
$(".state_list").val("").trigger("change");

I have an empty option:
     
       
       Alabama
       Alaska
       Arizona
       ...
       West Virginia
       Wisconsin
       Wyoming
     

Is there a way to totally remove all selections? Also how about selecting all?

Reply to this email directly or view it on GitHub:
https://github.com/harvesthq/chosen/issues/31#issuecomment-1782941

So is there a way to do this without patching the plugin?

Ok, so clearing all choices from a multi-select is possible without patching, if you're willing to lock yourself in to how the internals of chosen works:

// replace {select_id} below with the id of your <select> tag
$('#{select_id}_chzn .chzn-choices .search-choice a').click();

This will simulate clicking the remove "x" on each chosen item in the multiple select.

Selecting all options is possible too (by simulating clicking all the available options in the dropdown):

$('#{select_id}_chzn .chzn-drop li').click();

These need really should be added as methods to the chosen plugin.

Ok, to clarify all this:

@pfiller has pointed out that this is all possible in the harvesthq/chosen branch using:

$("#single_example").val(2).trigger("liszt:updated");

My bad for not reading the code/documentation thoroughly enough. That will work properly for multiple select boxes too.

Clearing all options from a multiple select can be done with:

$('#{select_id}').val([]).trigger('liszt:updated');

I think my previous comment is still the only way to select all options though.

_Note_ that my fork is now the same as harvesthq/chosen with respect to this, so just use it and ignore the .trigger('change') stuff.

For those of you who might be using the Prototype adapter you can do the same thing as follows:

  $(select_box_id).select('option[selected]').each(function(el){el.selected = false});
  Event.fire($(select_box_id), 'liszt:updated')

Kinda clunky but it works. If there is a better way to do this lemmie know

The solution I use is to change the selected option on the original source select and then rebuild Chosen.

select.val(value);
select.chosen('destroy');
select.chosen({});

@roelvanduijnhoven the solution given in the comment of @tompaton (or given by @RyanS for the Prototype version) is better as it updates the existing chosen element instead of destroying it and building a new one

For some reason the solution of @tompaton did not seem to work in my case. Didn't put much effort into it though, so maybe I did something wrong.

@roelvanduijnhoven If you are using the version 1.0, the event is now chosen:updated

Thanks @stof, that did the trick.

Just for reference, changing a value dynamically using jQuery:

$("#single_example").val(2).trigger('chosen:updated');

And for reference, this is documented: http://harvesthq.github.io/chosen/#change-update-events

Sorry @roelvanduijnhoven, my comment was intended for another issue, I've now deleted it. (gmail had grouped the emails, and I posted comment by replying)

Thanks a lot! This thread saved my day!
Finally I have multi-select with default values :)

Hi, I'm new jquery and just downloaded chosen. I'm tittle confused by how set/get multiple values in chosen.

what I'm trying to do is creating option dynamically on page load then need to select the defaults

thanks
Guri

gpdhillion:
use this
$('.chosen-select').val([1,2,3]).trigger('chosen:updated');

$ ("#id").val(id_value);
$("#id").chosen('destroy');
$("#id").chosen({});