Home Library Learn Downloads Support Community
Sign in | United States - English | |
66 out of 135 rated this helpful - Rate this topic

select element | select object

[This documentation is preliminary and is subject to change.]

Denotes a list box or drop-down list.

Document Object Model (DOM) Level 2 HTML Specification, Section 1.6.5HTML 4.01 Specification, Section 17.6

Standards information

HTML information

Closing Tagrequired
CSS Displayinline

DOM Information

Inheritance Hierarchy

 Node
  Element
   HTMLElement
     select

Remarks

From Microsoft Internet Explorer 5 to Microsoft Internet Explorer 6, This element is a windowed control and does not support the z-index attribute or zIndex property.

As of Windows Internet Explorer 7, this element is windowless and supports the z-index attribute and the zIndex property. The SELECT element does not require a strict doctype to enable windowless functionality.

Examples

This example uses the SELECT element to create a drop-down list box.

Copy 

<select name="Cats" size="1">
<option value="1">Calico
<option value="2">Tortie
<option value="3" selected>Siamese
</select>

This example uses the select element to create a multi-select list box by setting the SIZE and MULTIPLE attributes. To retrieve the selected options for a multi-select list box, iterate through the options collection and check to see where SELECTED is set to true.

Copy 

<select id="oSelect" name="Cars" size="3" multiple>
<option value="1" selected>BMW
<option value="2">Porsche
<option value="3" selected>Mercedes
</select>

This example adds a new option to the end of the SELECT list created above. The new Option constructor can also be used in JScript.

Copy 

<script language="JScript">
var oOption = document.createElement("OPTION");
oOption.text="Ferrari";
oOption.value="4";
oSelect.add(oOption);
</script>

See also

option

 

 

Build date: 3/8/2012

Did you find this helpful?
(1500 characters remaining)
Community Content Add
Annotations FAQ
Internet Explorer Javascript problem with 'value' attribute of 'select' object
If you define a 'select' element in a form, and its options do not have explicit 'value' attributes, the W3C HTML 4.01 spec [which I see has recently had its 10th birthday :-( ] states that the value returned by the element should be the contents (i.e. Javascript's innerHTML) of the selected option. However, in these circumstances Javascript in IE does not seem to receive any value at all from the select element. Basic example:
<html>
<body>
<select onchange="alert(this.value)">
<option>one</option>
<option>two</option>
<option>three</option>
</select>
</body>
</html>
IE displays a blank alert box. I've also tested this with Firefox, Opera and Google Chrome, and they all work correctly, i.e. they display the content of the selected option in the alert box.

There is a fairly trivial workaround, which is to duplicate each option element's contents as an explicit 'value' attribute, e.g. <option value="one">one</option>.

I believe this counts as yet another IE bug. Not a show-stopper like many of them, but certainly a cause of great resentment in having to spend the time tracking it down in my code.

Eddie
History
Better DOM link
yecril is corrrect. The url he/she gives is maybe not the best as its version-specific and the W3C could change that URL (unless they state somewhere that its a valid permalink). How about just:
http://www.w3.org/TR/DOM-Level-2-HTML/
History
Invalid link
This object is defined in World Wide Web Consortium (W3C) Document Object Model (DOM) Level 2 but the underlying hyperlink points to Document Object Model (DOM) Level 2 Core Specification and this object is not defined there. The correct hyperlink would point to Document Object Model HTML <http://www.w3.org/TR/2003/REC-DOM-Level-2-HTML-20030109/html.html#ID-94282980>
History
ONMOUSEOUT Events

An onmouseout event is fired on the parent DIV when the mouse clicks on a select box and moves over the list of options. This makes it very hard to determine whether or not the mouse is still within the bounds of the parent DIV.

For Example:

<div onmouseout="alert('the div has been abandoned')" style="width:300px; height:200px">

<select>

<option>Option 1</option>

<option>Option 2</option>

<option>Option 3</option>

<option>Option 4</option>

<option>Option 5</option>

</select>

Some text might go here to instruct the user or explain how the information will be used, or whatever.

</div>

History