Cookies improve the way our website works, by using this website you are agreeing to our use of cookies. For more information see our privacy policy. OK
WordPress Theme & Editor Syntax Highlighter Blog
WordPress Theme & Editor Syntax Highlighter Forum Blog
You are here: Reference > JavaScript > client-side > HTML DOM > objects > options

options collection

Browser support:
Represents a collection of all option elements in a select element.
The elements in the collection are sorted in source code order.

Syntax:

Properties that reference the object:
•object.options
Related HTML objects:
The base interface, through which you can add new functionalities to the options collection, is the HTMLOptionsCollection interface.

Possible members:

Properties:
length
Returns an integer that specifies the number of elements in the current collection.

This property is read-only.
selectedIndex
Specifies or returns the zero-based index of the selected option in a select object or in the selection list of a keygen object.
Methods:
[nameOrIndex]
Returns an element or a collection of elements from the current collection by name or index.

Parameters:

nameOrIndex
Required. A string or a zero-based integer that specifies the element or elements to retrieve.
  • If an integer value is specified, it specifies the index of the element to retrieve.
  • If this parameter is a string, then it specifies a value for the name or id property of the element or elements to retrieve.
Internet Explorer does not support string values.

Return value:

  • If no match is found, it returns undefined.
  • If exactly one match is found, it returns the matching option element.
  • If more than one match is found, it returns an options sub-collection filled with the matching elements. The sub-collection contains the matching elements in source order.
In Firefox and Opera, if more than one match is found, the first matching element is returned.
add (element [, index])
Inserts an option element into the current collection at the specified position.
The add method of a select element is similar to this method, but it insert an option element before a specified option element.

Parameters:

element
Required. Reference to the option element to add.
index
Optional. A zero-based integer that specifies the position of the insertion.
This parameter can also refer to an option element in the current collection, in Opera and in Internet Explorer from version 8. In that case, the option referred to by the element parameter should be inserted before the option referred to by the index parameter.
If index parameter is not specified, the add method inserts the option element into the end of the current collection.

Return value:

This method has no return value.
item (nameOrIndex [, subIndex])
Returns an element or a collection of elements from the current collection by name or index.
The item method of a select element is identical to the item method of the select element's options collection.

Parameters:

nameOrIndex
Required. A string or a zero-based integer that specifies the element or elements to retrieve.
  • If an integer value is specified, it specifies the index of the element to retrieve.
  • If this parameter is a string, then it specifies a value for the name or id property of the element or elements to retrieve.
Firefox does not support string values.
subIndex
Optional. Supported by Internet Explorer only. If more than one matching element is found for the index parameter (possible only if it is a string), the item method creates an options sub-collection filled with the matching elements. In that case, the subIndex property specifies the position of the element in the sub-collection to retrieve. In other cases, the subIndex property has no meaning.

Return value:

  • If no match is found, it returns null in Internet Explorer, Firefox and Opera, and returns undefined in Google Chrome and Safari.
  • If exactly one match is found, it returns the matching option element.
  • If more than one match is found, it returns an options sub-collection filled with the matching elements. The sub-collection contains the matching elements in source order.
In Opera, if more than one match is found, the first matching element is returned.
namedItem (name)
Returns an element or a collection of elements from the current collection by name.
The namedItem method of a select element is identical to the namedItem method of the select element's options collection.

Parameters:

name
Required. String that specifies a value for the name or id property of the element or elements to retrieve.

Return value:

  • If no match is found, it returns null in Internet Explorer, Firefox and Opera, and returns undefined in Google Chrome and Safari.
  • If exactly one match is found, it returns the matching option element.
  • If more than one match is found, it returns an options sub-collection filled with the matching elements. The sub-collection contains the matching elements in source order.
In Firefox and Opera, if more than one match is found, the first matching element is returned.
remove (index)
Removes the option element at the specified position from the current collection.
Since Firefox does not support this method, for a cross-browser solution, use the remove method of the select element to remove an option by position and use the removeChild method to remove an option element by reference.

Parameters:

index
Required. A zero-based integer that specifies the position of the element or a reference to the option element to remove.
This parameter can also refer to an option element in the current collection, in Opera and Firefox. In that case, the referred element should be removed.

Return value:

This method has no return value.
tags
Returns a NodeList collection that contains all elements from the current collection with the specified tag name.
urns
Returns a NodeList collection that contains all elements to which the specified behavior is attached.

Example HTML code 1:

This example illustrates the use of the options collection for a single-selection list:
 
<head>
    <script type="text/javascript">
        function GetSelOption (selectTag) {
            var selIdx = selectTag.selectedIndex;
            var selOption = selectTag.options[selIdx];

            alert ("The selected option is " + selOption.text);
        }
    </script>
</head>
<body>
    Change the selection in the list below:
    <select onchange="GetSelOption (this);">
        <option>Apple</option>
        <option>Peach</option>
        <option>Pear</option>
    </select>
</body>
Copy Code Print Preview Syntax Highlighter
Did you find this example helpful? yes no

Example HTML code 2:

This example displays the selected items in a multiple-selection list:
 
<head>
    <script type="text/javascript">
        function GetSelected (selectTag) {
            var selIndexes = "";

            for (var i = 0; i < selectTag.options.length; i++) {
                var optionTag = selectTag.options[i];
                if (optionTag.selected) {
                    if (selIndexes.length > 0)
                        selIndexes += ", ";
                    selIndexes += optionTag.text;
                }
            }

            var info = document.getElementById ("info");
            if (selIndexes.length > 0) {
                info.innerHTML = "Selected options: " + selIndexes;
            }
            else {
                info.innerHTML = "There is no selected option";
            }
        }
    </script>
</head>
<body>
    Please select some options (use the CTRL key for multiple selection)
    <br />
    <select multiple="multiple" onchange="GetSelected (this);">
        <option>Apple</option>
        <option>Peach</option>
        <option>Pear</option>
    </select>
    <br /><br />

    <span id="info" style="border:1px solid #606060; background-color:#e0d0e0;"></span>
</body>
Copy Code Print Preview Syntax Highlighter
Did you find this example helpful? yes no

Example HTML code 3:

This example illustrates the use of the add method:
 
<head>
    <script type="text/javascript">
        function InsertOption () {
            var selectTag = document.getElementById ("mySelect");
            var option = document.createElement ("option");
            option.text = "second";
            selectTag.options.add (option, 1);
        }
    </script>
</head>
<body>
    <select id="mySelect" size="5">
        <option>first</option>
        <option>third</option>
    </select>
    <button onclick="InsertOption ()">Insert an option</button>
</body>
Copy Code Print Preview Syntax Highlighter
Did you find this example helpful? yes no

Example HTML code 4:

This example illustrates the use of the onchange event for a select element:
 
<head>
    <script type="text/javascript">
        function OnSelectionChange (select) {
            var selectedOption = select.options[select.selectedIndex];
            alert ("The selected option is " + selectedOption.value);
        }
    </script>
</head>
<body>
    Select an item from the following list:<br />
    <select onchange="OnSelectionChange (this)">
        <option value="Apple" />Apple
        <option value="Pear" />Pear
        <option value="Peach" />Peach
    </select>
</body>
Copy Code Print Preview Syntax Highlighter
Did you find this example helpful? yes no

Example HTML code 5:

This example shows how to create a selection list dynamically:
 
<head>
    <script type="text/javascript">
        var countries = ['Australia', 'Great Britain', 'Germany', 'United States'];

        function FillCountryList () {
            var countryList = document.getElementById ("country");

            for (var i=0; i < countries.length; i++) {
                    // Option (text, value)
                var countryOption = new Option (countries[i], countries[i]);
                countryList.options.add (countryOption);
            }
        }
    </script>
</head>
<body onload="FillCountryList ()">
    <select id="country">
    </select>
</body>
Copy Code Print Preview Syntax Highlighter
Did you find this example helpful? yes no

Example HTML code 6:

This example is similar to the previous one, but it uses 2-character alphabetical country codes for option values. It is useful if you want to store the selected country in database.
 
<head>
    <script type="text/javascript">
        var countries = ['Australia', 'AU', 'Great Britain', 'GB', 'Germany', 'DE', 'United States', 'US'];

        function FillCountryList () {
            var countryList = document.getElementById ("country");

            for (var i=0; i < countries.length; i += 2) {
                    // Option (text, value)
                var countryOption = new Option (countries[i], countries[i+1]);
                countryList.options.add (countryOption);
            }
        }
    </script>
</head>
<body onload="FillCountryList ()">
    <select id="country">
    </select>
</body>
Copy Code Print Preview Syntax Highlighter
Did you find this example helpful? yes no

Example HTML code 7:

The previous two examples create selection list from arrays. The following one creates a selection list from a string. It is useful if you use AJAX to fill the contents of a selection list. For further details about AJAX, see the page for the XMLHttpRequest object and the responseText property.
 
<head>
    <script type="text/javascript">
            // the response of an AJAX call (responseText)
        var httpResponse = "Australia,AU,Great Britain,GB,Germany,DE,United States,US";

        var countries = httpResponse.split (",");

        function FillCountryList () {
            var countryList = document.getElementById ("country");

            for (var i=0; i < countries.length; i += 2) {
                    // Option (text, value)
                var countryOption = new Option (countries[i], countries[i+1]);
                countryList.options.add (countryOption);
            }
        }
    </script>
</head>
<body onload="FillCountryList ()">
    <select id="country">
    </select>
</body>
Copy Code Print Preview Syntax Highlighter
Did you find this example helpful? yes no

Example HTML code 8:

This example illustrates how you can change the items in a select element depending on the selected item in another select element:
 
<head>
    <script type="text/javascript">
        var countriesAndCities = {};
        countriesAndCities['AU'] = ['Brisbane', 'Melbourne', 'Sydney'];
        countriesAndCities['GB'] = ['Liverpool', 'London', 'Manchester'];
        countriesAndCities['DE'] = ['Berlin', 'Hamburg', 'Munich'];
        countriesAndCities['US'] = ['Chicago', 'Los Angeles', 'New York'];

        function ChangeCityDropList () { 
            
            var countryDropList = document.getElementById ("country");
            var cityDropList = document.getElementById ("city");
            var selCountry = countryDropList.options[countryDropList.selectedIndex].value;

            // remove all cities
            while (cityDropList.options.length) {
                cityDropList.remove (0);
            }

            // add new cities
            var cities = countriesAndCities[selCountry];
            if (cities) {
                for (var i=0; i < cities.length; i++) {
                    var city = new Option (cities[i], i);
                    cityDropList.options.add (city);
                }
            }
        } 
    </script>
</head>
<body onload="ChangeCityDropList ();">   
    <select id="country" onchange="ChangeCityDropList();"> 
        <option value="">-- Country --</option> 
        <option value="AU">Australia</option> 
        <option value="GB">Great Britain</option> 
        <option value="DE" selected="selected">Germany</option> 
        <option value="US">United States</option> 
    </select> 

    <select id="city"> 
    </select> 
</body>
Copy Code Print Preview Syntax Highlighter
Did you find this example helpful? yes no

External links:

options (MSDN)
User Contributed Comments

Post Content

Post Content
WordPress Theme & Editor | Index Panel | Syntax Highlighter | Dottoro
Link To Us | Terms of Use | Contact Us | Privacy Policy
© 2024 Dottoro.com. All rights reserved.
HTML
CSS
JavaScript
Appendix