/

HTML / CSS / JavaScript Tutorial

HTML Element: <select>

[this page | pdf | back links]

The HTML <select> element indicates a drop-down list. The option elements within the <select> element identify the available options within the drop-down list

 

The attributes it can take (other than HTML global attributes and HTML event attributes) include:

 

Attribute

Description

More

autofocus

Specifies whether element should automatically get focus when page loads

Here

disabled

Specified element(s) to be disabled

Here

form

Name of the form that element belongs to

Here

multiple

Indicates that a user can enter more than one value

Here

name

Name of element

Here

required

Whether the element must be filled out before submitting form

Here

size

Specifies number of visible options

Here

 

To create or access such an element in JavaScript see here. The corresponding HTML DOM object supports standard DOM properties and methods, and additional properties with the same name and meaning as the attributes of the underlying HTML element referred to above. It also supports the following additional properties and methods:

 

Additional properties:

 

Property

Description

More

length

Returns number of option elements within the drop-down list

Here

options

Returns a collection of all options in drop-down list

Here

selectedIndex

Sets / returns index of selected option

Here

type

Returns type of form the drop-down list is within

Here

value

Sets / returns the value of the selected option in the drop-down list

Here

 

Additional methods:

 

Method

Description

More

add()

Adds an option to drop-down list

Here

remove()

Removes an option from drop-down list

Here

 

The default style applicable to this element is shown here.

 

EXAMPLE:


HTML USED IN THIS EXAMPLE:
<!DOCTYPE html>
<html> <!-- Copyright (c) Nematrian Limited 2018 -->
<head></head>
<body>
Created using HTML:<br>
<select size="5">
  <optgroup label="Fruit">
    <option value="fruit1">Apple</option>
    <option value="fruit2">Banana</option>
  </optgroup>
  <option value="veg">Vegetables</option>
</select>

<br><br>Created using JavaScript:<br>
<span id="element"></span>

<script>
var x = document.createElement("SELECT")
var x1 = document.createElement("OPTGROUP");
var x1a = document.createElement("OPTION");
var x1b = document.createElement("OPTION");
var x2 = document.createElement("OPTION");
x1a.textContent = "Apple"; x1a.setAttribute("value","fruit1");
x1.appendChild(x1a);
x1b.textContent = "Banana"; x1b.setAttribute("value","fruit2");
x1.appendChild(x1b);
x1.setAttribute("label","Fruit");
x.appendChild(x1);
x2.textContent = "Vegetables"; x2.setAttribute("value","veg");
x.appendChild(x2);
x.setAttribute("size","5");
document.getElementById("element").appendChild(x);
</script>

</body>
</html>


NAVIGATION LINKS
Contents | Prev | Next | HTML Elements


Desktop view | Switch to Mobile