JQuery select2 set default value from an option in list?

how to set default value for select2 dropdown
select2 default value multiple
select2 set selected value jquery
select2 set selected value by id
select2 set selected value multiple
select2 empty option
select2 update options
select2 not showing options

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

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".

Global defaults, In some cases, you need to set the default options for all instances of Select2 in You can set default options by calling $.fn.select2.defaults.set("key", "value") . $('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.

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.

Add, select, or clear items, Programmatically adding, selecting, and clearing options in a Select2 control. The fourth parameter sets the options actual selected state - if set to true , the new Select the option with a value of '1' $('#mySelect2').trigger('change'); // Notify  Using select2 library there are 2 ways to set the value 1. when single value is present you can pass it as string $("#elementid").select2("val","valueTobeset") 2. when you are using select2 with multiselect option you can pass an array of the values to select2 and all those values will be set

$("#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');

Placeholders, Default selection placeholders​​ In this case the id of the data object should match the value of the corresponding default selection. $('select'). select2({ placeholder: { id: '-1', // the value of the option text: 'Select an option' } }); When an option is selected from the dropdown menu, Select2 will display the selected value in the container box. By default, it will display the text property of Select2's internal representation of the selected option. Templating. The appearance of selected results can be customized by using the templateSelection configuration option. This takes a callback that transforms the selection data object into a string representation or jQuery object:

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.

Set select 2 default value only with the ID of the object · Issue #5003 , I am using select2 v4 and I get the values of my select via ajax. I want to be able to set the selected value only via the ID of the object. the full data object option.​text = data.full_name; option.value = data.id; // notify JavaScript  The select tag in HTML is used to create a dropdown list of options which can be selected. The option tag contains the value that would be used when selected. The default value of the select element can be set by using the ‘selected’ attribute on the required option. This is a boolean attribute.

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)

Default value not getting set · Issue #283 · select2/select2 · GitHub, and is there an option with value='1049' in the select ? and if you are using 2.1 try with latest master branch. Selecting options. To programmatically select an option/item for a Select2 control, use the jQuery .val () method: $ ( '#mySelect2' ).val ( '1' ); // Select the option with a value of '1' $ ( '#mySelect2' ).trigger ( 'change' ); // Notify any JS components that the value changed.

JQuery select2 set default value from an option in list , I want to be able to set the default/selected value of a select element using the JQuery Select2 plugin. Answers: One more way – just add a  When setting options globally, any past defaults that have been set will be overridden. Default options are only used when an option is requested that has not been set during initialization. You can set default options by calling $.fn.select2.defaults.set("key", "value"). For example: $.fn.select2.defaults.set("theme", "classic"); Nested

Options - Select2, You can set default options by calling $.fn.select2.defaults.set("key", "value") . Due to a jQuery bug, nested options using data-* attributes do not work in jQuery 1.x. is used to uniquely identify the options that are displayed in the results list. You have a select element, and you need to “select” one of its options based on one of its values. What you do is use the “selected-selector” of jQuery to do it in a single line. Lets say I have the following select element and I need to dynamically select the option with a value of 3, which would be the “Peach”.

How to set the default value for an HTML <select> element , The option tag contains the value that would be used when selected. The option that is having the 'selected' attribute will be displayed by default on the dropdown list. Syntax: <option How to get the outer html of an element using jQuery ? Hi All, I am adding my drop down list control on form load and want to set default to it using jquery I have already created jquery for Selected Index Changed Event Implementation If i includ

Comments
  • For those using the config.data data source (rather than outputting everything as 'options'), this answer below is the one that works :)
  • I could not get the above JavaScript to work for me. I did get the following to work: $("#id").select2("val", null);
  • above code works fine for single value, but in case of multiple values only one value is getting selected
  • your html markup has a class with a . in it. so basically your code wont set the value because youre selecting the wrong element.
  • or rather an element which doesnt exist :)
  • 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());
  • $('#source_timezone').val('US/Eastern').select2()
  • This works great, but how do you make it select multiple options, not just the 1?
  • no joy here. With or without initialization, this simply does not work with AJAX data!
  • 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();
  • why is it different from @avebone answer? I see the same answer made 5 month later.
  • This will append a new option, I believe he wants to load options and select one of those.
  • 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.
  • because you did not try .trigger('change');
  • 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.