set select2 option using text not value

select2 set selected value by text
select2 set selected value by id
how to set default value for select2 dropdown
select2 get selected value
select2 set data
select2 set selected value multiple
jquery set selected option by text
select2 get selected text

I know if i have a select2 and i want to set one of the options, i can do run this code.


Lets say i want to get the text of the option

<option value=4>California</option>

but if i want to set it based on the text not the value, how do i do it?

I tried doing

$("#select").select2(data.text(), "California");

but it didnt work.

How can i do this programatically in jquery or javascript.

Any help is appreciated

For example: If you need to find Australia among other countries

let long_name = 'Australia';
let $element = $('.country-js')
let val = $element.find("option:contains('"+long_name+"')").val()

Other answers did not work for me, probably because I use newer version of select2

how to set values by selected text · Issue #4178 · select2/select2 , Hi, we can set values by below code $("#ddlcolor").select2("val", "red") Just trigger the change event after you select the option and Select2 will update. and i wanted to "set" multiselect select with specific values by text not  Select2 is a jQuery plugin which customizes HTML select element and makes it more user-friendly. It adds search features, allows to add an image with options. The HTML select element option can easily set selected using jQuery – $(selector).val(option-value);. But this not directly works with the Select2 dropdown element.

Further to Shakeel Ahmed's answer, you should call .trigger('change'), so in total something like this:

$("#select").select2("val", $("#select option:contains('Text')").val()).trigger('change');

Add, select, or clear items, Create if not exists Set the value, creating a new option if necessary if Create a DOM Option and pre-select by default var newOption = new Option(data.text,  Also as I tried, when use ajax in select2, the programmatic control methods for set new values in select2 does not work for me! Now I write these code for resolve the problem:

In addition for multi selects use this, for not losing already selected values

var selected=$("#foo option:selected").map(function(){ return this.value }).get();
selected.push( $("#foo option:contains('text')").val() );

Change Selected option in Select2 Dropdown with jQuery, So I have a dropdownlist, and I know that I can set the selected option by the .val(​) function, as in, $('#MySelect').val("12345"); if there is an  This is a limitation of the HTML specification and is not a limitation that Select2 can overcome. If you wish to create a true hierarchy of selectable options, use an <option> instead of an <optgroup> and change the style with CSS. Please note that this approach may be considered "less accessible" as it relies on CSS styling,

You can use following codes

$("#select").select2("val", $("#select option:contains('Text')").val() );

If will select option using your Text

Setting selected option in dropdownlist by the text, not value, Ok, I found the way. It's just passing an array of option values to 'val' argument: $('​#my_select2').select2('val', ["value1", "value2", "value3"]);. The second one is the text value of the select element. In the example code, we will show how you can get the text value of the select using jQuery. The following select box has some options with values, the text value of the selected option will be retrieved from this select element.

How to select multiple values in select2 control by jquery , You can set default options by calling $.fn.select2.defaults.set("key", "value") . You can emulate grouping by using an <option> instead of an <optgroup> and The id and text properties are required on each object, and these are the  Get Selected Options from Multiple Select Box. Similarly, you can retrieve the selected values from multiple select boxes with a little trick. A multiple select box allows a user to select multiple options. Hold down the control key on Windows or command key on Mac to select multiple options.

Options - Select2, When using Select2 with remote data, the HTML required for the select is the just need to include an option for each selection that contains the value and text that by Select2 // since we are using custom formatting functions we do not need to Select2 multi-value select boxes can set restrictions regarding the maximum  however it appears that'select2').options.options no longer contains the current options that are set on initial initialization. Anyone know the proper way to get the current select2 options at runtime? (Yes, I've tried googling, however any search for "options" has results for select options, not the select2 initialization options.

Examples - Select2, To dynamically set the “selected” value of a Select2 component: select .val("20"​) //set value for option to post it .text("nabi")) //set a text for show by Select2 // since we are using custom formatting functions we do not need  The correct way to add new items to Select2, selected or not, is to append <option> tags to the original element. In the case of selections (<option selected>), you always have to trigger change afterwards so Select2 and other components detect that there was a change in the value.

  • Saved my life. Spent the last 2 hours banging my head searching for a solution with a select trying everything, then finally dawns on me to search for a select2 option the first answer BAM! solves it for me. Much thanks!
  • @CesarBielich why did not you vote it up, if it worked for you?
  • Use California instead of Text