Adding Options to a Select Menu

Contact Us or call 1-877-932-8228
Adding Options to a Select Menu

Adding Options to a Select Menu

As we learned previously, select menus have an options collection. You can create a new option using the Option() constructor and then add it to the options collection using the add() method of the select object.

Select objects have a corresponding remove(position) method used to remove the option at the passed-in position (index). You will see this used in the last demo of the lesson.

The Option() constructor takes four parameters: text, value, defaultSelected, and selected. Only text is required. The following demo shows how to dynamically add color options to a select list:

Code Sample:

DynamicForms/Demos/adding-options.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Adding Options</title>
<link rel="stylesheet" href="adding-options.css" type="text/css">
<script type="text/javascript" src="../../lib.js"></script>
<script type="text/javascript">
	function addOption() {
		var sel = document.getElementById("color-list");
		var name = document.getElementById("new-option-name").value;
		var value = document.getElementById("new-option-value").value;
		var option = new Option(name,value);
		try {
			sel.add(option,null);
		} catch (e) {
			//for IE7 and earlier
			if (e.name == "TypeError") {
				sel.options[sel.options.length] = option;
			} else {
				throw e;
			}
		}
	}
	
	observeEvent(window,"load",function() {
		var btn = document.getElementById("add-option");
		var sel = document.getElementById("color-list");
		observeEvent(btn,"click",addOption);
		observeEvent(sel,"change",function() {
			if(sel.selectedIndex == 0) {
				document.bgColor="#ffffff";
			} else{
				document.bgColor=sel.options[sel.selectedIndex].value;	
			}
		});
	});
</script>
</head>
<body>
	<h1>Adding Options</h1>
	<form action="">
		<label>Colors:</label>
		<select id="color-list" name="color-list">
			<option value="">Please select</option>
		</select>
		<hr>
		<label>Name:</label>
		<input type="text" id="new-option-name" name="new-option-name" value="Red">
		<br>
		<label>Value:</label>
		<input type="text" id="new-option-value" name="new-option-value" value="#ff0000">
		<br>
		<input type="button" id="add-option" value="Add Option">
	</form>

---- C O D E   O M I T T E D ----

</body>
</html>

When the page loads, we begin observing click events on the buttons and change events on the select list.

When the user clicks the button, we get the values for name and value from the form elements and create a new option element using var option = new Option(name,value);.

We then try to add that option to the select object using the standard add() method, like this: sel.add(option,null);. The second argument is the option which this new option should come before. Specifying null makes the new option get appended to the end of the options collection. (Note that the second argument is required in Firefox).

Internet Explorer 7 and earlier do not support adding options in this way, which is why we must put the code in a try block. If it fails, we add the option the way IE used to do it: sel.options[sel.options.length] = option;

Our lib.js file contains the following cross-browser function for appending options to select lists:

function appendOptionToSelect(sel,opt) {
	try {
		sel.add(opt,null);
	} catch (e) {
		//for IE7 and earlier
		if (e.name == "TypeError") {
			sel.options[sel.options.length] = opt;
		} else {
			throw e;
		}
	}	
}
Next