Javascript Reference - HTML DOM Select options Collection

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

Browser Support


`options`	Yes	Yes	Yes	Yes	Yes

Syntax

selectObject.options

Properties

Property	Description
length	the number of option elements in the list
selectedIndex	The index of the options in a select object. The index starts at 0.

Methods

Method	Description
[index]	Get element by an integer starting at 0
[add(option[,index])]	Inserts an option element into the collection at the specified index. If no index is provided, it adds the option element at the end of the collection
item(index)	Get the element from the collection by index starting at 0
namedItem(name_or_id)	Get the element from the collection by name or id attribute
remove(index)	Removes the element by index from the collection

Example

The following code shows how to show the number of options in a drop-down list.


<!DOCTYPE html>
<html>
<body>
<!--from w  w  w.  ja v a2  s  .  c o  m-->
<form>
<select id="mySelect">
  <option>A</option>
  <option>B</option>
  <option>C</option>
  <option>D</option>
</select>
</form>
<button onclick="myFunction()">test</button>

<p id="demo"></p>

<script>
function myFunction() {
    var x = document.getElementById("mySelect").options.length;
    document.getElementById("demo").innerHTML = "Found " + x + " options in the list.";
}
</script>

</body>
</html>

The code above is rendered as follows:

Example 2

The following code shows how to get the text of the first option in a drop-down list by using [index] syntax.


<!DOCTYPE html>
<html>
<body>
<!--   ww w  . j  a va 2  s.c  o  m-->
<form>
<select id="mySelect">
  <option>A</option>
  <option>B</option>
  <option>C</option>
  <option>D</option>
</select>
</form>
<button onclick="myFunction()">test</button>

<p id="demo"></p>

<script>
function myFunction() {
    var x = document.getElementById("mySelect").options[0].text;
    document.getElementById("demo").innerHTML = x;
}
</script>

</body>
</html>

The code above is rendered as follows:

Example 3

The following code shows how to Return the text of the first option in a drop-down list by using item(index) syntax.


<!DOCTYPE html>
<html>
<body>
<!--from  w ww .  j  a v a 2  s . c  o  m-->
<form>
<select id="mySelect">
  <option>A</option>
  <option>B</option>
  <option>C</option>
  <option>D</option>
</select>
</form>
<button onclick="myFunction()">test</button>
<p id="demo"></p>
<script>
function myFunction() {
    var x = document.getElementById("mySelect").options.item(0).text;
    document.getElementById("demo").innerHTML = x;
}
</script>

</body>
</html>

The code above is rendered as follows:

Example 4

The following code shows how to return the text of the option with id="A" in a drop-down list by using namedItem(name_or_id) syntax.


<!DOCTYPE html>
<html>
<body>
<!-- www  .j av  a 2s  .c om-->
<form>
<select id="mySelect">
  <option id="C">C</option>
  <option id="A">A</option>
  <option id="P">P</option>
  <option id="B">B</option>
</select>
</form>
<button onclick="myFunction()">test</button>

<p id="demo"></p>

<script>
function myFunction() {
    var x = document.getElementById("mySelect").options.namedItem("A").text;
    document.getElementById("demo").innerHTML = x;
}
</script>

</body>
</html>

The code above is rendered as follows:

Example 5

The following code shows how to add a "K" option at index position "1" in a drop-down list.


<!DOCTYPE html>
<html>
<body>
<!--   www  .  j a  v a2 s . c o  m-->
<form>
<select id="mySelect" size="8">
  <option>A</option>
  <option>B</option>
  <option>C</option>
  <option>D</option>
</select>
</form>
<button type="button" onclick="myFunction()">Insert option</button>
<script>
function myFunction() {
    var x = document.getElementById("mySelect");
    var c = document.createElement("option");
    c.text = "K";
    x.options.add(c, 1);
}
</script>

</body>
</html>

The code above is rendered as follows:

Example 6

The following code shows how to remove the option with index "1" from a drop-down list.


<!DOCTYPE html>
<html>
<body>
<!-- ww  w. j av  a 2 s.co  m-->
<form>
<select id="mySelect" size="4">
  <option>A</option>
  <option>B</option>
  <option>C</option>
  <option>D</option>
</select>
</form>
<button onclick="myFunction()">Remove</button>
<script>
function myFunction() {
    var x = document.getElementById("mySelect");
    x.options.remove(1);
}
</script>

</body>
</html>

The code above is rendered as follows:

Example 7

The following code shows how to loop through all options in a drop-down list, and output the text.


<!DOCTYPE html>
<html>
<body>
<form>
<select id="mySelect">
  <option>A</option>
  <option>B</option>
  <option>C</option>
  <option>D</option>
</select><!--  www  .  ja  v a 2 s.c o m-->
</form>
<button type="button" onclick="myFunction()">test</button>
<script>
function myFunction() {
    var x = document.getElementById("mySelect");
    var i;
    for (i = 0; i < x.length; i++) {
        console.log(x.options[i].text);
    }
}
</script>
</body>
</html>

The code above is rendered as follows: