How to set selected value of jQuery Select2? How to set selected value of jQuery Select2? ajax ajax

How to set selected value of jQuery Select2?


SELECT2 < V4


Step #1: HTML

<input name="mySelect2" type="hidden" id="mySelect2">

Step #2: Create an instance of Select2

$("#mySelect2").select2({      placeholder: "My Select 2",      multiple: false,      minimumInputLength: 1,      ajax: {          url: "/elements/all",          dataType: 'json',          quietMillis: 250,          data: function(term, page) {              return {                  q: term,              };          },          results: function(data, page) {              return {results: data};          },          cache: true      },      formatResult: function(element){          return element.text + ' (' + element.id + ')';      },      formatSelection: function(element){          return element.text + ' (' + element.id + ')';      },      escapeMarkup: function(m) {          return m;      }});

Step #3: Set your desired value

$("#mySelect2").select2('data', { id:"elementID", text: "Hello!"});

If you use select2 without AJAX you can do as follow:

<select name="mySelect2" id="mySelect2">  <option value="0">One</option>  <option value="1">Two</option>  <option value="2">Three</option></select>
/* "One" will be the selected option */$('[name=mySelect2]').val("0");

You can also do so:

$("#mySelect2").select2("val", "0");

SELECT2 V4


For select2 v4 you can append directly an option/s as follow:

<select id="myMultipleSelect2" multiple="" name="myMultipleSelect2[]">    <option value="TheID" selected="selected">The text</option>                                                                   </select>

Or with JQuery:

var $newOption = $("<option selected='selected'></option>").val("TheID").text("The text") $("#myMultipleSelect2").append($newOption).trigger('change');

other example

$("#myMultipleSelect2").val(5).trigger('change');


To dynamically set the "selected" value of a Select2 component:

$('#inputID').select2('data', {id: 100, a_key: 'Lorem Ipsum'});

Where the second parameter is an object with expected values.

UPDATE:

This does work, just wanted to note that in the new select2, "a_key" is "text" in a standard select2 object. so: {id: 100, text: 'Lorem Ipsum'}

Example:

$('#all_contacts').select2('data', {id: '123', text: 'res_data.primary_email'});

Thanks to @NoobishPro


Html:

<select id="lang" >   <option value="php">php</option>   <option value="asp">asp</option>   <option value="java">java</option></select>

JavaScript:

$("#lang").select2().select2('val','asp');

jsfiddle