HTML Elements/DHTML Objects

---

Denotes a selectable list box or drop-down list.

HTML Syntax

<select
   accesskey = key
   align = absbottom | absmiddle | baseline | bottom | left | middle | right | texttop | top
   class = classname
   datafld = colname
   datasrc = #id
   disabled
   id = value
   lang = language
   language = javascript | jscript | vbscript | vbs
   multiple
   name = name
   size = n
   style = css properties
   tabindex = n
   event = script
>

The SELECT element defines a selection list on an HTML form. Browsers render the element as a list of options from which the user can select an item. SELECT is always used with a set of OPTION elements, that define the selectable options in the list.

When a FORM containing a selection list is submitted for processing, the control name is provided by the SELECT element and the value provided by the selected OPTION element. If the OPTION specifies a value attribute, that value is sent. Otherwise, it is the text that follows the <option> tag. Only the selected option value ( s ) are submitted to the server.

Styles

The following HTML creates a drop-down list box.

<form name="theForm">
<select name="theList">
   <option>Alpha Romeo
 <option>BMW
 <option>Ferrari
 <option>Mercedes-Benz
 <option>Porsche
 <option>Range Rover
</select>
</form>

The next example creates a multi-select list box by setting the SELECT's size and multiple attributes.

<form name="theForm">
<select name="theList" multiple size=3>
   <option>Alpha Romeo
 <option>BMW
 <option>Ferrari
 <option>Mercedes-Benz
 <option>Porsche
 <option>Range Rover
</select>
</form>

The value of a selected OPTION in a SELECT element can be retrieved with the following notation:

document.formName.selectName.options
 [document.formName.selectName.selectedIndex].value

To retrieve the selected options for a multi-select list box, authors can iterate through the options collection checking for selected set to true.

 Show me 

The following example adds a new option to the end of an existing SELECT list. In ECMA-compatible scripting languages ( JScript™ and Javascript ), the new Option constructor can also be used.

var oOption = document.createElement ( "OPTION" );
oOption.text="Apples";
oOption.value="5";
document.all.oMyList.add ( oOption );

multiple, selectedIndex, OPTION, selected, defaultSelected, options

Books and more ...

Custom Search

Contents
HTML Elements / DOM Objects
HTML Element Attributes
CSS Attributes
DOM Object Properties
DOM-compliant Events Reference
DOM Methods Reference
DOM Collections Reference

Suggested Reading