How to Set the Selected Index With JavaScript

Save

JavaScript is a client-side scripting language that gives web developers the ability to dynamically alter most HTML elements contained in web pages, including items contained in drop-down lists. Typically, web developers create drop-down lists using the HTML <select> tag and populate them with individual elements using HTML <option> tags. Each option placed in a drop-down list has an index that can be referenced and manipulated using the JavaScript selectedIndex property, giving developers the ability to identify and change the selected indexes and values.

Things You'll Need

  • Text Editor
  • Web browser with JavaScript enabled
  • Open a text editor and create a new file named setIndex.html. Add some HTML tags to the file that include an open "<html>" tag, an open "<head>" tag, a close "</head>" tag, an open "<body>" tag, a close "</body>" tag, and a close "</html>" tag.

    <html>

    <head></head>

    <body></body>

    </html>

  • Add a "<script>" tag between the "<head>" and the "</head>" tags and set the <script> tag's type attribute to "text/javascript". Close the "</script>" tag.

    <html>

    <head>

    <script type="text/javascript">

    </script>

    </head>

    <body></body>

    </html>

  • Add a JavaScript function between the "<script>" and "</script>" tags and name the function setIndex(). The setIndex() function takes a single argument, placed in parenthesis, named "indexValue". The indexValue argument will be used to set a "<select>" index value by referencing the given selectedIndex property. Add an open curly brace "{" and a close curly brace "}" to indicate the location of the function's code.

    <html>

    <head>

    <script type="text/javascript">

    function setIndex(indexValue)

    {

    }

    </script>

    </head>

    <body></body>

    </html>

  • Edit the setIndex() function and use the getElementById() JavaScript method and the selectedIndex property to reference the selected index value of a select box with the id "selectBox". Set the index to the value passed to the setIndex() function ("indexValue").

    <html>

    <head>

    <script type="text/javascript">

    function setIndex(indexValue)

    {

    document.getElementById('selectBox').selectedIndex = indexValue;

    }

    </script>

    </head>

    <body></body>

    </html>

  • Add a "<select>" tag between the "<body>" and "</body>" tags, give the tag the id "selectBox", and add three "<option>" tags to the select box. Give the first "<option>" tag the text "First Selection" and close the first "</option>" tag. Give the second "<option>" tag the text "Second Selection" and close the second "</option>" tag. Give the third "<option>" tag the text "Third Selection" and close the third "</option>" tag. Close the "</select>" tag.

    <html>

    <head>

    <script type="text/javascript">

    function setIndex(indexValue)

    {

    document.getElementById('selectBox').selectedIndex = indexValue;

    }

    </script>

    </head>

    <body>

    <select id="selectBox">

    <option>First Selection</option>

    <option>Second Selection</option>

    <option>Third Selection</option>

    </select>

    </body>

    </html>

  • Add an "<input>" HTML tag below the close "</select>" tag. Give the input tag the id "indexValue" and a default "value" attribute "2".

    <html>

    <head>

    <script type="text/javascript">

    function setIndex(indexValue)

    {

    document.getElementById('selectBox').selectedIndex = indexValue;

    }

    </script>

    </head>

    <body>

    <select id="selectBox">

    <option>First Selection</option>

    <option>Second Selection</option>

    <option>Third Selection</option>

    </select>

    <input id="indexValue" value="2">

    </body>

    </html>

  • Add an HTML "<button>" tag below the "<input>" tag and add an onClick() event to the button that calls the setIndex() function. Pass the value from the "indexValue" input field using the JavaScript getElementById() method. Set the button's text to "Click to set the index to the value in the input field." Close the "</button>" tag and save and close setIndex.html.

    <html>

    <head>

    <script type="text/javascript">

    function setIndex(indexValue)

    {

    document.getElementById('selectBox').selectedIndex = indexValue;

    }

    </script>

    </head>

    <body>

    <select id="selectBox">

    <option>First Selection</option>

    <option>Second Selection</option>

    <option>Third Selection</option>

    </select>

    <input id="indexValue" value="2">

    <button onclick=setIndex(document.getElementById("indexValue").value)>Click to set the index to the value in the input field.</button>

    </body>

    </html>

  • Open setIndex.html in a web browser and click the button to change the "selectBox" select box value to "2". Type a different value ("0", "1") in the "indexValue" box and click the button to change the select box's index value.

Tips & Warnings

  • Selected indexes may also be set and retrieved using the "value" attribute and the getElementById method.
  • Consider coding an appropriate response if the user attempts to set the drop-down index to an invalid value, for example, by using an alert box.
  • Select boxes can take advantage of many styles available in cascading style sheets (CSS).
  • Typically, select boxes are used as part of an HTML form that uses the "<form>" tag.
  • A dropdown that allows multiple selections will return only the index of the first option selected.
  • The selectedIndex property assumes index values starting at 0.

References

  • Photo Credit John Foxx/Stockbyte/Getty Images
Promoted By Zergnet

Comments

Resources

You May Also Like

Related Searches

M
Is DIY in your DNA? Become part of our maker community.
Submit Your Work!