jQuery - 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

User · Accepted Answer

Select by description for jQuery v1 6    x000D   x000D  var text1    Two   x000D     select option   filter function     x000D      may want to use   trim in here x000D    return   this  text      text1  x000D     prop  selected   true   x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt  x000D   x000D   lt select gt  x000D     lt option value  0  gt One lt  option gt  x000D     lt option value  1  gt Two lt  option gt  x000D   lt  select gt  x000D   x000D   x000D    jQuery versions below 1 6 and greater than or equal to 1 4   x000D   x000D  var text1    Two   x000D     select option   filter function     x000D      may want to use   trim in here x000D    return   this  text      text1  x000D     attr  selected   true   x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 1 4 0 jquery min js  gt  lt  script gt  x000D   x000D   lt select gt  x000D     lt option value  0  gt One lt  option gt  x000D     lt option value  1  gt Two lt  option gt  x000D   lt  select gt  x000D   x000D   x000D    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    x000D   x000D     select   val  1       selects  Two  x000D     select   val  Two       also selects  Two  x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 1 2 3 jquery min js  gt  lt  script gt  x000D   x000D   lt select gt  x000D     lt option value  0  gt One lt  option gt  x000D     lt option value  1  gt Two lt  option gt  x000D   lt  select gt  x000D   x000D   x000D

User · Answer

Very fiddly and nothing else seemed to work    select name   quot dropdown quot     children   text  quot Mr quot   prop  quot selected quot   true   worked for me

User · Answer

Try     mySelect options  forEach o  gt  o selected   o text     Text C      x000D   x000D      mySelect options  forEach o  gt  o selected   o text     Text C     x000D   lt select id  mySelect  gt     lt option value  A  gt Text A lt  option gt     lt option value  B  gt Text B lt  option gt     lt option value  C  gt Text C lt  option gt   lt  select gt  x000D   x000D   x000D

User · Answer

I do it on this way  jQuery 1 9 1       my-select   val  Dutch   change      Note  don t forget the change    I had to search to long because of that

User · Answer

Heres an easy option  Just set your list option then set its text as selected value       ddlScheduleFrequency option   selected text  Select One

User · Answer

myselect option contains  YourTextHere     val      will return the value of the first option containing your text description  Tested this and works

User · Answer

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  lt  pLen      pStr   pStr   pPadStr  return pStr

User · Answer

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

User · Answer

myselect option contains  YourTextHere     val      will return the value of the first option containing your text description  Tested this and works

User · Answer

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

User · Answer

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

User · Answer

Here is very simple way  plz use it       free   val  y   change

User · Answer

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

User · Answer

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

User · Answer

Try this   to select the option with text myText      my-Select option text     myText       prop  selected   true

User · Answer

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

User · Answer

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

User · Answer

If you are trying to bind select with ID then the following code worked for me   lt select name  quot 0product id   quot  class  quot groupSelect quot  id  quot groupsel 0 quot  onchange  quot productbuilder update this value 0   quot  gt       lt option value  quot 0 quot  class  quot notag quot  id  quot id0 0 quot  gt --Select-- lt  option gt       lt option class  quot notag quot  value  quot 338 quot  id  quot id0 338 quot    gt Dual Promoter Puromycin Expression Plasmid - pSF-CMV-PGK-Puro   gt    114 00 lt  option gt       lt option class  quot notag quot  value  quot 282 quot  id  quot id0 282 quot    gt EMCV IRES Puromycin Expression Plasmid - pSF-CMV-EMCV-Puro   gt    114 00 lt  option gt       lt option class  quot notag quot  value  quot 265 quot  id  quot id0 265 quot    gt FMDV IRES Puromycin Expression Plasmid - pSF-CMV-FMDV-Puro   gt    114 00 lt  option gt       lt option class  quot notag quot  value  quot 101 quot  id  quot id0 101 quot    gt Puromycin Selection Plasmid - pSF-CMV-Ub-Puro AscI   gt    114 00 lt  option gt       lt option class  quot notag quot  value  quot 105 quot  id  quot id0 105 quot    gt Puromycin Selection SV40 Ori Plasmid - pSF-CMV-Ub-Puro-SV40 Ori SbfI   gt    114 00 lt  option gt  lt  select gt   AND THIS IS TEH JS CODE    document   ready function           var text    quot EMCV IRES Puromycin Expression Plasmid - pSF-CMV-EMCV-Puro   gt    114 00 quot         alert text      quot  groupsel 0 option quot   filter function         may want to use   trim in here   return   this  text      text     prop  selected   true

User · Answer

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

User · Answer

Try     mySelect options  forEach o  gt  o selected   o text     Text C      x000D   x000D      mySelect options  forEach o  gt  o selected   o text     Text C     x000D   lt select id  mySelect  gt     lt option value  A  gt Text A lt  option gt     lt option value  B  gt Text B lt  option gt     lt option value  C  gt Text C lt  option gt   lt  select gt  x000D   x000D   x000D

User · Answer

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

User · Answer

I haven t tested this  but this might work for you      select my-select option       each function     this selected    this text    myVal

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

Heres an easy option  Just set your list option then set its text as selected value       ddlScheduleFrequency option   selected text  Select One

User · Answer

If you are trying to bind select with ID then the following code worked for me   lt select name  quot 0product id   quot  class  quot groupSelect quot  id  quot groupsel 0 quot  onchange  quot productbuilder update this value 0   quot  gt       lt option value  quot 0 quot  class  quot notag quot  id  quot id0 0 quot  gt --Select-- lt  option gt       lt option class  quot notag quot  value  quot 338 quot  id  quot id0 338 quot    gt Dual Promoter Puromycin Expression Plasmid - pSF-CMV-PGK-Puro   gt    114 00 lt  option gt       lt option class  quot notag quot  value  quot 282 quot  id  quot id0 282 quot    gt EMCV IRES Puromycin Expression Plasmid - pSF-CMV-EMCV-Puro   gt    114 00 lt  option gt       lt option class  quot notag quot  value  quot 265 quot  id  quot id0 265 quot    gt FMDV IRES Puromycin Expression Plasmid - pSF-CMV-FMDV-Puro   gt    114 00 lt  option gt       lt option class  quot notag quot  value  quot 101 quot  id  quot id0 101 quot    gt Puromycin Selection Plasmid - pSF-CMV-Ub-Puro AscI   gt    114 00 lt  option gt       lt option class  quot notag quot  value  quot 105 quot  id  quot id0 105 quot    gt Puromycin Selection SV40 Ori Plasmid - pSF-CMV-Ub-Puro-SV40 Ori SbfI   gt    114 00 lt  option gt  lt  select gt   AND THIS IS TEH JS CODE    document   ready function           var text    quot EMCV IRES Puromycin Expression Plasmid - pSF-CMV-EMCV-Puro   gt    114 00 quot         alert text      quot  groupsel 0 option quot   filter function         may want to use   trim in here   return   this  text      text     prop  selected   true

User · Answer

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  lt  pLen      pStr   pStr   pPadStr  return pStr

User · Answer

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

User · Answer

I haven t tested this  but this might work for you      select my-select option       each function     this selected    this text    myVal

User · Answer

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 lt 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 lt ele length  ii        if ele options ii  text  text      Found        ele options ii  selected true        return true          return false

User · Answer

I haven t tested this  but this might work for you      select my-select option       each function     this selected    this text    myVal

User · Answer

myselect option contains  YourTextHere     val      will return the value of the first option containing your text description  Tested this and works

User · Answer

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

User · Answer

Here is very simple way  plz use it       free   val  y   change

User · Answer

This line worked       myDropDown option contains myText    attr  selected   true

User · Answer

Very fiddly and nothing else seemed to work    select name   quot dropdown quot     children   text  quot Mr quot   prop  quot selected quot   true   worked for me

User · Answer

This line worked       myDropDown option contains myText    attr  selected   true

User · Answer

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

User · Answer

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

User · Answer

Try this   to select the option with text myText      my-Select option text     myText       prop  selected   true

User · Answer

Try this   to select the option with text myText      my-Select option text     myText       prop  selected   true

User · Answer

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

User · Answer

myselect option contains  YourTextHere     val      will return the value of the first option containing your text description  Tested this and works

User · Answer

Try this   to select the option with text myText      my-Select option text     myText       prop  selected   true

User · Answer

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

User · Answer

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 lt 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 lt ele length  ii        if ele options ii  text  text      Found        ele options ii  selected true        return true          return false

User · Answer

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

User · Answer

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

User · Answer

I haven t tested this  but this might work for you      select my-select option       each function     this selected    this text    myVal

User · Answer

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

User · Answer

I do it on this way  jQuery 1 9 1       my-select   val  Dutch   change      Note  don t forget the change    I had to search to long because of that

[javascript] jQuery - setting the selected value of a select control via its text description

Select by description for jQuery v1.6+

jQuery versions below 1.6 and greater than or equal to 1.4

Previous versions

Examples related to javascript

Examples related to jquery