JQuery select2 set default value from an option in list?

Question

I want to be able to set the default/selected value of a select element using the JQuery Select2 plugin.

Solution 1

One more way - just add a selected = "selected" attribute to the select markup and call select2 on it. It must take your selected value. No need for extra JavaScript. Like this :

Markup

<select class="select2">
   <option id="foo">Some Text</option>
   <option id="bar" selected="selected">Other Text</option>
</select>

JavaScript

$('select').select2(); //oh yes just this!

See fiddle : http://jsfiddle.net/6hZFU/

Edit: (Thanks, Jay Haase!)

If this doesn't work, try setting the val property of select2 to null, to clear the value, like this:

$('select').select2("val", null); //a lil' bit more :)

After this, it is simple enough to set val to "Whatever You Want".

Solution 2

The above solutions did not work for me, but this code from Select2's own website did:

$('select').val('US'); // Select the option with a value of 'US'
$('select').trigger('change'); // Notify any JS components that the value changed

Webpage found here

Hope this helps for anyone who is struggling, like I was.

Solution 3

$("#id").select2("val", null); //this will not work..you can try

You should actually do this...intialise and then set the value..well this is also the way it worked for me.

$("#id").select2().select2("val", null);
$("#id").select2().select2("val", 'oneofthevaluehere');

Solution 4

One way to accomplish this is...

$('select').select2().select2('val', $('.select2 option:eq(1)').val());

So basically you first initalize the plugin then specify the default value using the 'val' parameter. The actual value is taken from the specified option, in this case #1. So the selected value from this example would be "bar".

<select class=".select2">
  <option id="foo">Some Text</option>
  <option id="bar">Other Text</option>
</select>

Hope this is useful to someone else.

Solution 5

For 4.x version

$('#select2Id').val(__INDEX__).trigger('change');

to select value with INDEX

$('#select2Id').val('').trigger('change');

to select nothing (show placeholder if it is)

View more solutions

Comments

[krishwader]

your html markup has a class with a . in it. so basically your code wont set the value because youre selecting the wrong element.

[krishwader]

or rather an element which doesnt exist :)

[Jay Haase]

I could not get the above JavaScript to work for me. I did get the following to work: $("#id").select2("val", null);

[Adrian P.]

If you need to have the clear button after setting a selected value use: $('.select').select2({allowClear: true}).select2('val', $('.select2 option:eq(1)').val());

[Roy Hyunjin Han]

$('#source_timezone').val('US/Eastern').select2()

[Brian Tompsett - 汤莱恩]

Please edit with more information. Code-only and "try this" answers are discouraged, because they contain no searchable content, and don't explain why someone should "try this". We make an effort here to be a resource for knowledge.

[Sandeep Gantait]

above code works fine for single value, but in case of multiple values only one value is getting selected

[TheTC]

This works great, but how do you make it select multiple options, not just the 1?

[MC9000]

no joy here. With or without initialization, this simply does not work with AJAX data!

[random_user_name]

For future visitors, you can combine this into a single command: $('select').val('US').trigger('change');, or even shorter would be $('select').val('US').change();

[Yevgeniy Afanasyev]

why is it different from @avebone answer? I see the same answer made 5 month later.

[Yevgeniy Afanasyev]

because you did not try .trigger('change');

[Marcelo Agimóvel]

This will append a new option, I believe he wants to load options and select one of those.

[Bosco]

This is an issue with Select2, Yes the plugin is fine but Why Does Someone need to create a new API to preselect data. there has or should be a way to trigger the ajax query to get the dropdown and preselect a given value.