Setting the selected value of a select control via its text description

Question

I have a select control, and in a javascript variable I have a text string.

Using jQuery I want to set the selected element of the select control to be the item with the text description I have (as opposed to the value, which I don't have).

I know setting it by value is pretty trivial. e.g.

$("#my-select").val(myVal);

But I'm a bit stumped on doing it via the text description. I guess there must be a way of getting the value out from the text description, but my brain is too Friday afternoon-ed to be able to work it out.

@DanAtkinson was about to do the same myself. select has absolutely nothing to do with this question. — thecoshman
– thecoshman, Commented Jan 13, 2014 at 9:18

Dario Mory · Accepted Answer · 2019-03-28 21:33:34Z

798

Select by description for jQuery v1.6+

var text1 = 'Two';
$("select option").filter(function() {
  //may want to use $.trim in here
  return $(this).text() == text1;
}).prop('selected', true);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select>
  <option value="0">One</option>
  <option value="1">Two</option>
</select>

jQuery versions below 1.6 and greater than or equal to 1.4

var text1 = 'Two';
$("select option").filter(function() {
  //may want to use $.trim in here
  return $(this).text() == text1;
}).attr('selected', true);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>

<select>
  <option value="0">One</option>
  <option value="1">Two</option>
</select>

Note that while this approach will work in versions that are above 1.6 but less than 1.9, it has been deprecated since 1.6. It will not work in jQuery 1.9+.

Previous versions

val() should handle both cases.

$('select').val('1'); // selects "Two"
$('select').val('Two'); // also selects "Two"

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>

<select>
  <option value="0">One</option>
  <option value="1">Two</option>
</select>

edited Mar 28, 2019 at 21:33

Dario Mory

3,5032 gold badges19 silver badges17 bronze badges

answered Jan 30, 2009 at 16:25

Crescent Fresh

117k27 gold badges157 silver badges140 bronze badges

Sign up to request clarification or add additional context in comments.

13 Comments

DanSingerman Over a year ago

This feels like it shouldn't work (it appears it could be ambiguous) but it actually should work fine for me. Thanks.

Crescent Fresh Over a year ago

Note that jQuery 1.4 has now changed this behavior to select by value if the attribute has been specified, and only select by text if the value attribute is missing. So in this example $('select').val('Two') will select the second option in 1.3.x, but will do nothing in 1.4.x.

JR Lawhorne Over a year ago

So, what's the best way to do it in 1.4 now?

dland Over a year ago

In more recent versions of jQuery, .val('not-an-option-value') will reset the select to the first option.

DA. Over a year ago

The first answer to this question appears to be the solution post 1.3.x stackoverflow.com/questions/3644449/…

|

spoulson · Accepted Answer · 2009-01-30 16:22:59Z

149

I haven't tested this, but this might work for you.

$("select#my-select option")
   .each(function() { this.selected = (this.text == myVal); });

answered Jan 30, 2009 at 16:22

spoulson

21.7k17 gold badges79 silver badges103 bronze badges

Comments

erwaman · Accepted Answer · 2020-01-16 04:29:27Z

93

Try this...to select the option with text myText

$("#my-Select option[text=" + myText +"]").prop("selected", true);

edited Jan 16, 2020 at 4:29

erwaman

3,6274 gold badges32 silver badges31 bronze badges

answered Jan 30, 2009 at 16:51

Jay Corbett

28.5k22 gold badges59 silver badges74 bronze badges

6 Comments

Jay Corbett Over a year ago

@spoulson's answer worked for me...I tried to do it without the .each

Gelmir Over a year ago

In many cases, this approach doesn't work unfortunately. I even had to resolve to classic $("#my-Select option[text=" + myText +"]").get(0).selected = true; style from time to time :(...

esse Over a year ago

Make sure that you are first removing the selected attribute before re-setting, otherwise it will appear not to work (works for me in 1.9)

Mark Amery Over a year ago

@MarkW For 1.9, use .prop instead of .attr; the cause of the change is that in 1.9 jQuery disabled the old hacks that let you use .attr to change some DOM properties as well as HTML attributes. (Google javascript dom properties vs attributes if you don't know the distinction.)

erwaman Over a year ago

Updated answer to use .prop('selected', true) instead of .attr('selected', 'selected') for jQuery 1.9+ compatibility.

|

Lee Taylor · Accepted Answer · 2025-06-14 18:38:43Z

54

I do it this way (jQuery 1.9.1)

$("#my-select").val("Dutch").change();

Note: don't forget the change(), I had to search too long because of that :)

edited Jun 14 at 18:38

Lee Taylor

7,99416 gold badges38 silver badges53 bronze badges

answered Sep 15, 2015 at 15:17

ErazerBrecht

1,6332 gold badges21 silver badges38 bronze badges

4 Comments

Bob Jordan Over a year ago

Wish I could upvote multiple times. Its an hour past quitting time and now I can go home.

Muhammad Tarique Over a year ago

Great answer! short and simple...This should be on top...Keep voting up.

Brandon Rhodes Over a year ago

This worked in my case, thanks! But doesn't this select not by the displayed text, as the OP requested, but by the value itself, which the OP does not have?

Zion Saal Over a year ago

$("#dropdown").val(varible).change(); is not working for me :(

Russ Cam · Accepted Answer · 2009-01-30 16:45:05Z

23

$("#myselect option:contains('YourTextHere')").val();

will return the value of the first option containing your text description. Tested this and works.

edited Jan 30, 2009 at 16:45

answered Jan 30, 2009 at 16:36

Russ Cam

126k34 gold badges211 silver badges275 bronze badges

4 Comments

DanSingerman Over a year ago

Thanks - I think this might be the version I use, as I also need to have logic for when there is no matching text, and this seems the easiest mechanism, for being able to do that.

Russ Cam Over a year ago

bear in mind, it will get only the value for the first option matching the text.

Russ Cam Over a year ago

In addition, you could chain attr("selected","selected") onto the wrapped set instead of val() and this would work similar to CarolinaJay65's answer

alexandre-rousseau Over a year ago

OP said "setting value" not "getting value"

Saghir A. Khatri · Accepted Answer · 2014-07-03 05:40:16Z

16

This line worked:

$("#myDropDown option:contains(myText)").attr('selected', true);

edited Jul 3, 2014 at 5:40

Saghir A. Khatri

3,1346 gold badges48 silver badges76 bronze badges

answered Dec 12, 2013 at 19:42

Diego Unanue

6,8769 gold badges49 silver badges69 bronze badges

2 Comments

Matthew Hegarty Over a year ago

had to use prop('selected', true) for jQuery 1.12.3

Arvy Over a year ago

Had to $("#myDropDown option").prop('selected', false); before, to unset any previous selected ones, or we'll have more that one item selected (use Inspector to check), that can lead to undesirable results.

Dave · Accepted Answer · 2013-05-08 15:49:51Z

15

To avoid all jQuery version complications, I honestly recommend using one of these really simple javascript functions...

function setSelectByValue(eID,val)
{ //Loop through sequentially//
  var ele=document.getElementById(eID);
  for(var ii=0; ii<ele.length; ii++)
    if(ele.options[ii].value==val) { //Found!
      ele.options[ii].selected=true;
      return true;
    }
  return false;
}

function setSelectByText(eID,text)
{ //Loop through sequentially//
  var ele=document.getElementById(eID);
  for(var ii=0; ii<ele.length; ii++)
    if(ele.options[ii].text==text) { //Found!
      ele.options[ii].selected=true;
      return true;
    }
  return false;
}

answered May 8, 2013 at 15:49

Dave

3,33939 silver badges35 bronze badges

2 Comments

Dave Over a year ago

It enables the selection of an select option via value or text (depending on function called). For example: setSelectByValue('sausages','2'); Will find, and select, the option with value "2" in the selection object with an id of "sausages".

Mark Amery Over a year ago

@Neal Uh... it answers the question?

Losbear · Accepted Answer · 2013-10-02 13:54:57Z

12

I know this is an old post, but I couldn't get it to select by text using jQuery 1.10.3 and the solutions above. I ended up using the following code (variation of spoulson's solution):

      var textToSelect = "Hello World";

      $("#myDropDown option").each(function (a, b) {
            if ($(this).html() == textToSelect ) $(this).attr("selected", "selected");
        });

Hope it helps someone.

answered Oct 2, 2013 at 13:54

Losbear

3,3231 gold badge34 silver badges29 bronze badges

Comments

aWebDeveloper · Accepted Answer · 2011-07-07 13:14:29Z

8

 $("#Test").find("option:contains('two')").each(function(){
     if( $(this).text() == 'two' ) {
        $(this).attr("selected","selected");
     }
 });

The if statement does a exact match with "two" and "two three" will not be matched

answered Jul 7, 2011 at 13:14

aWebDeveloper

38.7k42 gold badges179 silver badges248 bronze badges

1 Comment

Jagd Over a year ago

No, that's not what I meant. I think my comment was a bit unclear, so I just deleted it. I did upvote your answer though, because it worked for my situation.

mplungjan · Accepted Answer · 2015-01-27 12:21:42Z

6

Easiest way with 1.7+ is:

$("#myDropDown option:text=" + myText +"").attr("selected", "selected");

1.9+

$("#myDropDown option:text=" + myText +"").prop("selected", "selected");

Tested and works.

edited Jan 27, 2015 at 12:21

mplungjan

180k29 gold badges183 silver badges246 bronze badges

answered Aug 31, 2012 at 16:01

RParker

991 silver badge5 bronze badges

2 Comments

Mark Amery Over a year ago

Not in 1.9+ it doesn't. Since 1.6 you should be using .prop to change DOM properties, not .attr (which is for HTML/DOM attributes). See stackoverflow.com/q/5874652/1709587

mplungjan Over a year ago

I would use ("selected",true) instead of the truthy value of "selected"

Pankaj Chauhan · Accepted Answer · 2017-09-07 04:34:31Z

6

Here is very simple way. plz use it

$("#free").val("y").change();

answered Sep 7, 2017 at 4:34

Pankaj Chauhan

1,75315 silver badges13 bronze badges

1 Comment

Gert Arnold Over a year ago

As already answered: stackoverflow.com/a/32589732/861716.

Kimtho6 · Accepted Answer · 2012-02-03 14:39:35Z

4

take a look at the jquery selectedbox plugin

selectOptions(value[, clear]):

Select options by value, using a string as the parameter $("#myselect2").selectOptions("Value 1");, or a regular expression $("#myselect2").selectOptions(/^val/i);.

You can also clear already selected options: $("#myselect2").selectOptions("Value 2", true);

edited Feb 3, 2012 at 14:39

Kimtho6

6,1949 gold badges43 silver badges56 bronze badges

answered Jan 30, 2009 at 16:59

Vitor Silva

17.8k8 gold badges35 silver badges27 bronze badges

Comments

Ammar Bukhari · Accepted Answer · 2013-06-01 07:33:25Z

3

Just on a side note. My selected value was not being set. And i had search all over the net. Actually i had to select a value after a call back from a web service, because i was getting data from it.

$("#SelectMonth option[value=" + DataFromWebService + "]").attr('selected', 'selected'); 
$("#SelectMonth").selectmenu('refresh', true);

So the refresh of the selector was was the only thing that i was missing.

answered Jun 1, 2013 at 7:33

Ammar Bukhari

2,1322 gold badges16 silver badges17 bronze badges

1 Comment

Sagive Over a year ago

This is the right one - altough... i see no reason for the second line. Should work as is.

Chris Edwards · Accepted Answer · 2013-06-17 11:59:21Z

2

I found that by using attr you would end up with multiple options selected when you didn't want to - solution is to use prop:

$("#myDropDown option:text=" + myText +"").prop("selected", "selected");

answered Jun 17, 2013 at 11:59

Chris Edwards

3,6412 gold badges36 silver badges42 bronze badges

Comments

Keith · Accepted Answer · 2012-01-18 13:39:38Z

1

I had a problem with the examples above, and the problem was caused by the fact that my select box values are prefilled with fixed length strings of 6 characters, but the parameter being passed in wasn't fixed length.

I have an rpad function which will right pad a string, to the length specified, and with the specified character. So, after padding the parameter it works.

$('#wsWorkCenter').val(rpad(wsWorkCenter, 6, ' '));


function rpad(pStr, pLen, pPadStr) {
if (pPadStr == '') {pPadStr == ' '};
while (pStr.length < pLen)
    pStr = pStr + pPadStr;
return pStr; 
}

answered Jan 18, 2012 at 13:39

Keith

8014 gold badges12 silver badges22 bronze badges

Comments

tomjm · Accepted Answer · 2014-09-16 14:22:24Z

1

 $('#theYear').on('change', function () {
 FY = $(this).find('option:selected').text();
 $('#theFolders').each(function () {
     $('option:not(:contains(' + FY + '))', this).hide();
 });
 $('#theFolders').val(0);
});

$('#theYear').on('mousedown', function () {
 $('#theFolders option').show().find('option:contains("Select")', this).attr('selected', 'selected');
});

answered Sep 16, 2014 at 14:22

tomjm

3272 silver badges18 bronze badges

Comments

Kamil Kiełczewski · Accepted Answer · 2020-08-03 21:12:48Z

1

Try

[...mySelect.options].forEach(o=> o.selected = o.text == 'Text C' )

[...mySelect.options].forEach(o=> o.selected = o.text == 'Text C' );

<select id="mySelect">
  <option value="A">Text A</option>
  <option value="B">Text B</option>
  <option value="C">Text C</option>
</select>

answered Aug 3, 2020 at 21:12

Kamil Kiełczewski

93.7k34 gold badges401 silver badges375 bronze badges

Comments

Sam Alexander · Accepted Answer · 2015-04-22 15:48:31Z

0

This accepted answer does not seem correct, while .val('newValue') is correct for the function, trying to retrieve a select by its name does not work for me, I had to use the id and classname to get my element

answered Apr 22, 2015 at 15:48

Sam Alexander

4921 gold badge6 silver badges25 bronze badges

Comments

Misa Lazovic · Accepted Answer · 2016-06-01 13:28:30Z

0

Heres an easy option. Just set your list option then set its text as selected value:

$("#ddlScheduleFrequency option").selected(text("Select One..."));

edited Jun 1, 2016 at 13:28

Misa Lazovic

2,83110 gold badges34 silver badges39 bronze badges

answered Jan 16, 2015 at 18:30

DominionDave

392 bronze badges

Comments

Netferret · Accepted Answer · 2020-07-10 09:38:02Z

0

Very fiddly and nothing else seemed to work

$('select[name$="dropdown"]').children().text("Mr").prop("selected", true);

worked for me.

answered Jul 10, 2020 at 9:38

Netferret

6385 silver badges16 bronze badges

2 Comments

jgarcias Over a year ago

This solution definitely works.

Barmar Jun 14 at 22:51

This sets the text of all the options, it doesn't match the option with the given text.

Dharman · Accepted Answer · 2020-10-15 07:12:25Z

If you are trying to bind select with ID then the following code worked for me.

<select name="0product_id[]" class="groupSelect" id="groupsel_0" onchange="productbuilder.update(this.value,0);">
    <option value="0" class="notag" id="id0_0">--Select--</option>
    <option class="notag" value="338" id="id0_338"  >Dual Promoter Puromycin Expression Plasmid - pSF-CMV-PGK-Puro  > £114.00</option>
    <option class="notag" value="282" id="id0_282"  >EMCV IRES Puromycin Expression Plasmid - pSF-CMV-EMCV-Puro  > £114.00</option>
    <option class="notag" value="265" id="id0_265"  >FMDV IRES Puromycin Expression Plasmid - pSF-CMV-FMDV-Puro  > £114.00</option>
    <option class="notag" value="101" id="id0_101"  >Puromycin Selection Plasmid - pSF-CMV-Ub-Puro AscI  > £114.00</option>
    <option class="notag" value="105" id="id0_105"  >Puromycin Selection SV40 Ori Plasmid - pSF-CMV-Ub-Puro-SV40 Ori SbfI  > £114.00</option></select>

AND THIS IS TEH JS CODE

$( document ).ready(function() {
      var text = "EMCV IRES Puromycin Expression Plasmid - pSF-CMV-EMCV-Puro  > £114.00";
      alert(text);
$("#groupsel_0 option").filter(function() {
  //may want to use $.trim in here
  return $(this).text() == text;
}).prop('selected', true);
});

Sanjeev Pundir · Accepted Answer · 2023-12-30 10:13:22Z

0

Try this one ..

$("#my-select").val($("#my-select option:contains('searchText')").val()).change();

answered Dec 30, 2023 at 10:13

Sanjeev Pundir

491 gold badge1 silver badge7 bronze badges

Comments

lisandro · Accepted Answer · 2025-11-08 16:29:22Z

0

What worked for me was

$('#my-select').children().text("yourTextHere").prop("selected", true);

answered Nov 8 at 16:29

lisandro

5215 silver badges12 bronze badges

Comments

geowa4 · Accepted Answer · 2009-01-30 16:23:15Z

-1

Get the children of the select box; loop through them; when you have found the one you want, set it as the selected option; return false to stop looping.

answered Jan 30, 2009 at 16:23

geowa4

42.1k17 gold badges90 silver badges107 bronze badges

Collectives™ on Stack Overflow

Setting the selected value of a select control via its text description

24 Answers 24

Select by description for jQuery v1.6+

jQuery versions below 1.6 and greater than or equal to 1.4

Previous versions

13 Comments

Comments

6 Comments

4 Comments

4 Comments

2 Comments

2 Comments

Comments

1 Comment

2 Comments

1 Comment

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

2 Comments

Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

24 Answers 24

Select by description for jQuery v1.6+

Previous versions

13 Comments

Comments

6 Comments

4 Comments

4 Comments

2 Comments

2 Comments

Comments

1 Comment

2 Comments

1 Comment

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

2 Comments

Comments

Comments

Comments

Comments

Linked

Related