HOME HTML CSS JAVASCRIPT SQL PHP JQUERY XML ASP.NET MORE...
REFERENCES | EXAMPLES | FORUM | ABOUT

Select options Collection

Select Object Reference Select Object

Example

Loop through all options in a drop-down list, and output the text:

var x = document.getElementById("mySelect");
var txt = "";
for (var i=0; i<x.length; i++)
  {
  txt = txt + x.options[i].text + "<br>";
  }
document.getElementById("demo").innerHTML=txt;

The result of txt will be:

Apple
Orange
Pineapple
Banana

Try it yourself »

Definition and Usage

The options collection returns a collection of all the options in a drop-down list.

Note: There will be one array element for each <option> tag - starting at 0.

Note: The elements in the collection are sorted as they appear in the source code.


Browser Support

Internet Explorer Firefox Opera Google Chrome Safari

The options collection is supported in all major browsers.


Syntax

selectObject.options

Properties

Property Description
length Returns the number of option elements in the collection
selectedIndex Sets or returns the index of the selected option in a select object (starts at 0)

Methods

Method Description
[index] An integer that specifies the element to retrieve (starts at 0)
[add(option[,index])] Adds an option element into the collection at the specified index. If no index is specified, it inserts the option element at the end of the collection
item(index) Returns the element from the collection with the specified index (starts at 0)
namedItem(name_or_id) Returns the element from the collection with the specified name (name or id attribute)
remove(index) Removes the element with the specified index from the collection


More Examples

Example

Show the number of options in a drop-down list:

var x = document.getElementById("mySelect").options.length;
document.getElementById("demo").innerHTML="Found " + x + " option elements in the list.";

Try it yourself »

Example

Change the items in a drop-down list depending on the selected option in another drop-down list:

var carsAndModels = {};
carsAndModels['VO'] = ['V70','XC60','XC90'];
carsAndModels['VW'] = ['Golf','Polo','Scirocco','Touareg'];
carsAndModels['BMW'] = ['M6','X5','Z3'];

function ChangeCarList()
{
var carList = document.getElementById("car");
var modelList = document.getElementById("carmodel");
var selCar = carList.options[carList.selectedIndex].value;
while (modelList.options.length)
  {
  modelList.remove(0);
  }
var cars = carsAndModels[selCar];
if (cars)
  {
  for (var i=0; i<cars.length; i++)
    {
    var car = new Option(cars[i],i);
    modelList.options.add(car);
    }
  }
}

Try it yourself »

Example

[index]

Return the text of the first option (index 0) in a drop-down list:

var x = document.getElementById("mySelect").options[0].text;
document.getElementById("demo").innerHTML=x;

The result of x will be:

Apple

Try it yourself »

Example

item(index)

Return the text of the first option (index 0) in a drop-down list:

var x = document.getElementById("mySelect").options.item(0).text;
document.getElementById("demo").innerHTML=x;

The result of x will be:

Apple

Try it yourself »

Example

namedItem(name_or_id)

Return the text of the option with id="apple" in a drop-down list:

var x = document.getElementById("mySelect").options.namedItem("apple").text;
document.getElementById("demo").innerHTML=x;

The result of x will be:

Apple

Try it yourself »

Example

Add a "Kiwi" option at index position "1" in a drop-down list:

var x = document.getElementById("mySelect");
var c = document.createElement("option");
c.text = "Kiwi";
x.options.add(c,1);

Try it yourself »

Example

Remove the option with index "1" from a drop-down list:

var x = document.getElementById("mySelect");
x.options.remove(1);

Try it yourself »


Select Object Reference Select Object

Your suggestion:

Close [X]

Thank You For Helping Us!

Your message has been sent to W3Schools.

Close [X]
Search w3schools.com:

WEB BUILDING

Download XML Editor FREE Website BUILDER Free HTML5 Templates

SHARE THIS PAGE