The select boxes are objects that may be added to a HTML web page containing <option> or <select> elements. They can created and added by using DOM elements with “SELECT” keyword.

Syntax for select boxes

var sel = document.createElement(“SELECT”);

The table below shows select object properties and methods that can be used through DOM:

Select object properties and methods

Property/Object

Description

options

Returns the collection of drop-down list option.

disabled

If it is set, drop down is disabled and value is set to one option.

form

Returns the reference of the drop down list.

length

Returns length of the drop down list.

multiple

If it is set more than one option can be selected from drop down.

name

Sets or returns name attribute of the drop-down list.

size

Sets or returns values of size of drop down list. That is, if size is 4, drop down list shows 4 items at a time.

selectedIndex

Sets or returns index of selected option in drop down list.

type

Returns is drop down list is select-one or select-multiple type.

value

Sets or returns value of selected option in drop-down list.

add(option, index)

This method adds an option to drop down list, where ‘option’ is the element to be added. ‘index’ is position to be added to the drop down.

remove(index)

Removes the item given in ‘index’ from the drop down list.

Example of working with select boxes in JavaScript

 

›› go to examples ››