/

HTML / CSS / JavaScript Tutorial

JavaScript select object property: length

[this page | pdf | back links]

The length property of the JavaScript DOM object corresponding to the HTML <select> element returns the number of option elements within the drop-down list.

 

EXAMPLE:


HTML USED IN THIS EXAMPLE:
<!DOCTYPE html>
<html> <!-- Copyright (c) Nematrian Limited 2018 -->
<head></head>
<body>
<br>
<select id="element" size="3">
  <option value="fruit1">apple</option>
  <option value="fruit2">banana</option>
  <option value="fruit3">orange</option>
</select>
<br>
<button onclick="myOnclick()">
Select an option and then click to see JavaScript Select properties</button>
<br><br>
Select properties:<br>
<span id="element1"></span><br>
<span id="element2"></span><br>
<span id="element3"></span><br>
<span id="element4"></span><br>
<span id="element5"></span><br>
<span id="element6"></span>

<script>
function myOnclick() {
  var x = document.getElementById("element")
  document.getElementById("element1").innerHTML = "length: " + x.length;
  document.getElementById("element2").innerHTML = "options: " + x.options;
  document.getElementById("element3").innerHTML = "selectedIndex: " + x.selectedIndex;
  document.getElementById("element4").innerHTML = "type: " + x.type;
  document.getElementById("element5").innerHTML = "value: " + x.value;
  document.getElementById("element6").innerHTML = "hence selected option: " + x.options[x.selectedIndex].text;
}
</script>

</body>
</html>


NAVIGATION LINKS
Contents | Prev | Next | JavaScript DOM (and BOM)


Desktop view | Switch to Mobile