How to set selectedIndex of select element using display text

Question

How to set selectedIndex of select element using display text as reference   Example    lt input id  AnimalToFind  type  text    gt   lt select id  Animals  gt       lt option value  0  gt Chicken lt  option gt       lt option value  1  gt Crocodile lt  option gt       lt option value  2  gt Monkey lt  option gt   lt  select gt   lt input type  button  onclick  SelectAnimal      gt    lt script type  text javascript  gt      function SelectAnimal                   Set selected option of Animals based on AnimalToFind value            lt  script gt    Is there any other way to do this without a loop  You know  I m thinking of a built-in JavaScript code or something  Also  I don t use jQuery

User · Answer

lt script type  text javascript  gt       function SelectAnimal               Set selected option of Animals based on AnimalToFind value             var animalTofind   document getElementById  AnimalToFind             var selection   document getElementById  Animals                select element         for var i 0 i lt selection options length i                 if  selection options i  innerHTML    animalTofind value                    selection selectedIndex   i                  break                                  lt  script gt    setting the selectedIndex property of the select tag will choose the correct item  it is a good idea of instead of comparing the two values  options innerHTML  amp  amp  animal value  you can use the indexOf   method or regular expression to select the correct option despite casing or presense of spaces  selection options i  innerHTML indexOf animalTofind value     -1    or using  match  regular expression

User · Answer

You can use the HTMLOptionsCollection namedItem   That means that you have to define your select options to have a name attribute and have the value of the displayed text  e g      California

User · Answer

If you want this without loops or jquery you could use the following This is straight up JavaScript  This works for current web browsers  Given the age of the question I am not sure if this would have worked back in 2011  Please note that using css style selectors is extremely powerful and can help shorten a lot of code    x000D   x000D     Please note that querySelectorAll will return a match for  x000D     for the term   if there is more than one then you will  x000D     have to loop through the returned object x000D  var selectAnimal   function     x000D    var animals   document getElementById  animal    x000D    if  animals    x000D      var x   animals querySelectorAll  option value  frog      x000D      if  x length     1    x000D        console log x 0  index   x000D        animals selectedIndex   x 0  index  x000D        x000D      x000D    x000D   lt html gt  x000D   x000D   lt head gt  x000D     lt title gt Test without loop or jquery lt  title gt  x000D   lt  head gt  x000D   x000D   lt body gt  x000D     lt label gt Animal to select x000D     lt select id  animal  gt  x000D       lt option value  nothing  gt  lt  option gt  x000D       lt option value  dog  gt dog lt  option gt  x000D       lt option value  cat  gt cat lt  option gt  x000D       lt option value  mouse  gt mouse lt  option gt  x000D       lt option value  rat  gt rat lt  option gt  x000D       lt option value  frog  gt frog lt  option gt  x000D       lt option value  horse  gt horse lt  option gt  x000D     lt  select gt  x000D     lt  label gt  x000D     lt button onclick  selectAnimal    gt Click to select animal lt  button gt  x000D   x000D   lt  body gt  x000D   x000D   lt  html gt  x000D   x000D   x000D    document getElementById  Animal   querySelectorAll  option value  searchterm      in the index object you can now do the following  x 0  index

User · Answer

Try this   function SelectAnimal         var animals   document getElementById  Animals        var animalsToFind   document getElementById  AnimalToFind           get the options length     var len   animals options length      for i   0  i  lt  len  i                   check the current option s text if it s the same with the input box       if  animals options i  innerHTML    animalsToFind value                   animals selectedIndex   i           break

User · Answer

Try this   function SelectAnimal         var sel   document getElementById  Animals        var val   document getElementById  AnimalToFind   value      for var i   0  j   sel options length  i  lt  j    i            if sel options i  innerHTML     val               sel selectedIndex   i             break

User · Answer

Add name attribute to your option    lt option value  0  name  Chicken  gt Chicken lt  option gt    With that you can use the HTMLOptionsCollection namedItem  Chicken   value to set the value of your select element

User · Answer

You can set the index by this code    sel selectedIndex   0    but remember a caution in this practice  You would not be able to call the server side onclick method if you select the previous value selected in the drop down

[javascript] How to set selectedIndex of select element using display text?

Examples related to javascript

Examples related to selectedindex