Handling select items

Add select items dynamically

opts[opts.length] = new Option("Option text", "Option value");

Remove select items dynamically

opts[2] = null;

Unlike Java, arrays are automatically shrunk without an empty element.

Remove all select items

opts.length = 0;

The following example is an example where a menu is created in the second selection box when 'Programming language' is selected.
Selecting the top level in the language selection initializes the second selection box.

sel.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Handling select items</title>
<script type="text/javascript">
function chooseLang() {
	var form = document.getElementById("testForm");
	var lang = form.programLanguage.value;

	switch (lang) {
	case "java":
		form.step.options[0] = new Option("Java Introduction","javaIntro");
		form.step.options[1] = new Option("Class and Object","ClassObject");
		form.step.options[2] = new Option("Java DataType","JavadataType");
		break;
	case "javascript":
		form.step.options[0] = new Option("JavaScript Introduction","javascriptIntro");
		form.step.options[1] = new Option("JavaScript DataType","JavascriptDataType");
		form.step.options[2] = new Option("JavaScript Objects","JavascriptObjects");
		break;
	default:
		form.step.options.length = 0;
	}
}
</script>
</head>
<body>
<form id="testForm" action="sel.html">
	<select name="programLanguage" onchange="chooseLang()">
		<option value="">--Select Language</option>
		<option value="java">Java</option>
		<option value="javascript">JavaScript</option>
	</select>
	<select name="step">
	</select>
	<input type="submit" value="Test" />
</form>
</body>
</html>

Run example