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