How can I get a list of all values in select box

Question

I am stumped  I have a form with a dropdown list  and I would like to grab a list of all the values in the list  I pulled the below example from w3 schools  yes  I know it s unreliable  but other solutions on stack overflow seem to be very similar to this   It was not working for me  and I tried plugging it into jsfiddle  but no luck   HTML   lt form gt Select your favorite fruit       lt select id  mySelect  gt           lt option value  a  gt Apple lt  option gt           lt option value  o  gt Orange lt  option gt           lt option value  p  gt Pineapple lt  option gt           lt option value  b  gt Banana lt  option gt       lt  select gt   lt  form gt   lt button type  button  onclick  displayResult    gt Display text of all options lt  button gt    javascript   function displayResult         var x   document getElementById  mySelect        var txt    All options         var i      for  i   0  i  lt  x length  i              txt   txt     n    x options i  value            alert txt       Not working on jsfiddle  http   jsfiddle net WfBRr 1   However  it works at their site   http   www w3schools com jsref tryit asp filename tryjsref option text2  Any ideas on how to solve this

User · Answer

As per the DOM structure you can use below code        var x   document getElementById  mySelect         var txt            var val            for  var i   0  i  lt  x length  i               txt   x i  text                 val   x i  value

User · Answer

You had two problems    1  The order in which you included the HTML  Try changing the dropdown from  onLoad  to  no wrap - head  in the JavaScript settings of your fiddle   2  Your function prints the values  What you re actually after is the text  x options i  text  instead of x options i  value   http   jsfiddle net WfBRr 5

User · Answer

It looks like placing the click event directly on the button is causing the problem  For some reason it can t find the function  Not sure why     If you attach the event handler in the javascript  it does work however   See it here  http   jsfiddle net WfBRr 7    lt button id  display-text  type  button  gt Display text of all options lt  button gt   document getElementById  display-text   onclick   function          var x   document getElementById  mySelect        var txt    All options         var i      for  i   0  i  lt  x length  i              txt   txt     n    x options i  value            alert txt

User · Answer

Change   x length   to   x options length   Link to fiddle  And I agree with Abraham - you might want to use text instead of value  Update The reason your fiddle didn t work was because you chose the option   onLoad  instead of   No wrap - in

[javascript] How can I get a list of all values in select box?

Examples related to javascript

Examples related to html

Examples related to forms

Examples related to selection