Set selected value with javascript

[mrpohoda]

Setting selected value with javascript doesn't work. I know that chosen() adds class single_examplechzn_o_0 to <li> which has nothing in common with option value and that #single_example no more exists after chosen(). Is there a way this can work?

This works:

     <option value="1">1</option> 
     <option value="2">2</option> 
</select>

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

This doesn't work:

     <option value="1">1</option> 
     <option value="2">2</option> 
</select>

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

[tompaton]

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

[mrpohoda]

Unfortunately it does not work for me.

[tompaton]

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

[mrpohoda]

Thank you, this works perfectly!

[zeitan]

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

[tompaton]

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

[cevarief]

Yes it works like charm after using tompaton branch.

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

[zeitan]

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 :-)

[MB34]

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:

        <option value=""></option> 
        <option value="AL">Alabama</option>
        <option value="AK">Alaska</option>
        <option value="AZ">Arizona</option>
        ...
        <option value="WV">West Virginia</option>
        <option value="WI">Wisconsin</option>
        <option value="WY">Wyoming</option>
      </select>

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

[tompaton]

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
reply@reply.github.com
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:
#31 (comment)

[MB34]

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

[tompaton]

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.

[tompaton]

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.

[RyanS]

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

[roelvanduijnhoven]

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({});

[stof]

@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

[roelvanduijnhoven]

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.

[stof]

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

[roelvanduijnhoven]

Thanks @stof, that did the trick.

Just for reference, changing a value dynamically using jQuery:

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

[stof]

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

[tompaton]

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)

[PalSzabolcs]

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

[gpdhillon]

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

[ghost]

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

[binamaniar]

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

[hemanthkumarg70]

Use below code for multiple selection it works for me.

Javascript:-

function btnupdate() {
$("#single_example").chosen().val(['2', '1']).trigger("chosen:updated");
}

HTML:-
1 2 Insert