Working with form select boxes in JavaScript

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

<!DOCTYPE html>
<html>

<body>
	<select id="birds" size="5"></select>
	<button onclick="getList()">Create List</button>
	<p id="para"></p>
	<script>
		function getList(){
			var n = document.getElementById("birds");
			var option = document.createElement("option");
			option.text = "Kingfisher";
			n.add(option,n[0]);
			option = document.createElement("option");
			option.text = "Koel";
			n.add(option,n[1]);
			option = document.createElement("option");
			option.text = "Peacock";
			n.add(option,n[2]);
			option = document.createElement("option");
			option.text = "Kiwi";
			n.add(option,n[3]);
			option = document.createElement("option");
			option.text = "Duck";
			n.add(option,n[4]);
			document.getElementById("birds").multiple = true;
			document.getElementById("para").innerHTML = "List type: "  + document.getElementById("birds").type + " list length " + document.getElementById("birds").length;
		}
	</script>
</body>

</html>

›› go to examples ››

Working with form select boxes in JavaScript

Syntax for select boxes

Select object properties and methods

Example of working with select boxes in JavaScript

Comments

About

Contact

Get Connected