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

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/

<button id="display-text" type="button">Display text of all options</button>

document.getElementById('display-text').onclick = function () {
    var x = document.getElementById("mySelect");
    var txt = "All options: ";
    var i;
    for (i = 0; i < 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

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

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

[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