jQuery Setting select list selected based on text failing strangely

Question

I have been using the following code  with jQuery v1 4 2  to set the  selected  attribute of a select list based on  its  text  description rather than its  value        my-Select option text     myText       attr  selected   selected       This code worked fine  until I noticed one select list on which it failed  depending on the text that was being matched  After some hair-pulling I realized that it was failing only in cases where the text was a single word  no spaces  no non-alpha characters    All of my previous uses of this code had worked fine with select lists comprised solely of multi-word chemical names    For example  within the one select list  it worked fine with  pharbitic acid 25-D-spirosta-3 5-diene pogostol   Pogostemon       It failed with  glucose adenine  I have tried any way I could think of to surround the text variable with quotes  both single and double  to no avail   But why should a single word need quotes when a two word phrase does not    I have tried hard coding the text in there and had the same result   This works       constituent option text  a -allocryptopine    attr  selected    selected      This works       constituent option text 5-O-methylrisanrinol    attr  selected    selected      This did not work        constituent option text adenine    attr  selected    selected      I tried hard coding quotes  This did not work       constituent option text  glucose     attr  selected    selected      I could not get hard coded quotes  single or double  to work with any text at all   It s worth noting that quotes are acceptable when using the  value  attribute  E g   both of these work fine       constituent option value  3     attr  selected    selected         constituent option value 3    attr  selected    selected      Below is some code to demonstrate the problem  Two select lists  the first of which is comprised of simple words  the second of two word phrases  When the page loads it tries to set the value of each select list  The jQuery code works for the second list but not the first   I tried putting a space in  monkey  to get  mon key  and it worked    A working demo of the code below is here   I would greatly appreciate any insight into what I am doing wrong here  Or even an alternative selector syntax for using the   text  attribute  Thanks in advance to all who have the time to assist    lt  DOCTYPE html PUBLIC  -  W3C  DTD XHTML 1 0 Strict  EN   http   www w3 org TR xhtml1 DTD xhtml1-strict dtd  gt   lt html xmlns  http   www w3 org 1999 xhtml  xml lang  en  lang  en  gt     lt head gt      lt script type  text javascript  src     js jquery jquery js  gt  lt  script gt      lt script type  text javascript  gt       document  ready function         var text1    Monkey           mySelect1 option text     text1        attr  selected    selected         var text2    Mushroom pie           mySelect2 option text     text2        attr  selected    selected                       lt  script gt     lt  head gt    lt body gt      lt select id  mySelect1  gt       lt option gt  lt  option gt       lt option gt Banana lt  option gt       lt option gt Monkey lt  option gt       lt option gt Fritter lt  option gt     lt  select gt       lt select id  mySelect2  gt       lt option gt  lt  option gt       lt option gt Cream cheese lt  option gt       lt option gt Mushroom pie lt  option gt       lt option gt French toast lt  option gt     lt  select gt     lt  body gt    lt  html gt

User · Answer

Using the filter   function seems to work in your test cases  tested in Firefox   The selector would look like this       mySelect1 option   filter function          return   this  text        Banana

User · Answer

I usually use       my-Select option text      myText        attr  selected   selected

User · Answer

We can do it by searching the text in options of dropdown list and then by setting selected attribute to true   This code is run in every environment        numbers option contains     inputText        attr  selected    selected

User · Answer

If you want to selected value on drop-down text bases so you should use below changes  Here below is example and country name is dynamic        lt select id  selectcountry  gt       lt option value  1  gt India lt  option gt       lt option value  2  gt Ireland lt  option gt       lt  select gt       lt script gt       var country name   India           selectcountry   find  option contains      country name         attr  selected    selected         lt  script gt

User · Answer

The following works for text entries both with and without spaces       mySelect1   find  option text     text1        attr  selected   true

User · Answer

In case someone google for this  the solutions above didn t work for me so i ended using  pure  javascript  document getElementById  The id of the element   value    The value    And that would set the value and make the current value selected in the combo box  Tested in firefox   it was easier than keep googling a solution for jQuery

User · Answer

setSelectedByText function eID text        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

When an  lt option gt  isn t given a value     the text becomes its value  so you can just use  val   on the  lt select gt  to set by value  like this   var text1    Monkey       mySelect1   val text1    var text2    Mushroom pie       mySelect2   val text2     You can test it out here  if the example is not what you re after and they actually have a value  use the  lt option gt  element s  text property to  filter    like this   var text1    Monkey       mySelect1 option   filter function         return this text    text1      attr  selected   true    var text2    Mushroom pie       mySelect2 option   filter function         return this text    text2      attr  selected   true      You can test that version here

User · Answer

try this       mySelect1   find  option text     text1        attr  selected   true

User · Answer

I tried a few of these things until I got one to work in both Firefox and IE  This is what I came up with       my-Select   val     my-Select      option   filter function     return this text    myText    val       another way of writing it in a more readable fasion   var valofText       my-Select      option   filter function         return this text    myText    val      ElementID  val valofText     Pseudocode       my-Select   val  getValOfText  myText

User · Answer

my-select option contains     myText       attr  selected   true     This returns the first option containing your text description

[javascript] jQuery: Setting select list 'selected' based on text, failing strangely

Examples related to javascript

Examples related to jquery