How to Loop Through Select Options

JavaScript functions can iterate through user controls in a Web page.

When you create website forms in HTML pages, you can include "select" elements with a drop-down list of options for users to choose from. You may need to access the details of these option elements within the JavaScript code for your site. By creating a loop in your JavaScript code, you can iterate through the select options, accessing information about the HTML content and attributes within them. You can also alter the HTML content if this suits the purposes of your page.

Instructions

1. Create a function in the head section of your HTML Web page. Between the opening and closing head tags, add the following script section and function outline:

   <script type="text/javascript">
   function loopThroughOptions(selectID) {
   //function implementation here
   }
   </script>

2. Add the code inside the function to loop through your select options. To instruct the page to call the function, add the following button in your page:

   <input type="button" onclick="loopThroughOptions('foodselect')" value="loop" />

   This button is for demonstration, but will allow you to see that your looping code functions. The function call passes the select element ID as a parameter.

3. Add the select element to your page with options. If you do not already have a select element in your page, use the following sample markup code:

   <select id="foodselect">
   <option value="apple">Apple</option>
   <option value="cheese">Cheese</option>
   <option value="onion">Onion</option>
   </select>

   Make sure your code includes the ID attribute, as the JavaScript function will use it to identify the element. Place the select control before the test button.

4. Add the following code inside your JavaScript function to gain a reference to the select element using its ID attribute value:

   var select = document.getElementById(selectID);

   This code uses the passed parameter to get a reference to the element. Add the following code, using this element to acquire an array variable containing the option elements:

   var opts = select.options;

   This variable now contains an array that your code can loop through.

5. Create a loop for your select options:

   var opt=0;
   for(opt=0; opt<opts.length; opt++) {
   //process the options
   }}

   This code will execute once for each option item in the specified select element. The loop starts at zero, which is the first index position in an array, then iterates through the array until it reaches the final position.

6. Process each element in your select options array. The following sample code can be used to check that your function is working; add it inside the loop:

   alert("Option " + opt + " = " + opts[opt].value);

7. Save your page and open it in a Web browser to test it. You should see the value attribute of each option element written to an alert dialog, one after another. You can access other aspects of the option element such as its HTML content as follows:

   alert("Option " + opt + " = " + opts[opt].innerHTML);

Tips & Warnings

• You can also set aspects of option elements in JavaScript.

• Be careful not to accidentally create an infinite loop when iterating through arrays.

References

• W3Schools: JavaScript Where To
• W3Schools: JavaScript Functions
• W3Schools: HTML <input> Tag
• W3Schools: HTML <select> Tag
• W3Schools: Document getElementById() Method
• W3Schools: HTML DOM Select Object
• W3Schools: JavaScript For Loop
• W3Schools: HTML DOM Option Object

Resources

• JavaScript Kit: Changing Select Element Content on The Fly
• JavaWorld: Using JavaScript and Forms