DZone Snippets is a public source code repository. Easily build up your personal collection of code snippets, categorize them with tags / keywords, and share them with the world

Snippets has posted 5883 posts at DZone. View Full User Profile

Dynamic Select Example

07.12.2007
| 27832 views |
  • submit to reddit
        // Example of JavaScript to with with Select Options

<html>
<head>
	<title>test</title>	
</head>
<body id="test" onload="">
	<form>
		<select id="lstStuff" multiple="multiple" onChange="lstStuff_OnChange()" size="6" style="width:200px;">
			<option>item 1</option>
			<option>item 2</option>
			<option>item 3</option>
			<option>item 4</option>
			<option>item 5</option>
			<option>item 6</option>			
		</select>	
		<br/>
		<a href="javascript:selectAll('lstStuff', true);">all</a>
		<a href="javascript:selectAll('lstStuff', false);">none</a>
		<p/>
		<select id="lstOtherStuff" multiple="multiple" size="6" style="width:200px;">
		</select>
		<br/>
		<a href="javascript:selectAll('lstOtherStuff', true);">all</a>
		<a href="javascript:selectAll('lstOtherStuff', false);">none</a>
	</form>
	<script type="text/javascript" charset="utf-8">
		var otherStuff = {
			"item 1" : [ "subitem 1.1", "subitem 1.2", "subitem 1.3", "subitem 1.4" ],
			"item 2" : [ "subitem 2.1", "subitem 2.2" ],
			"item 4" : [ "subitem 4" ],
			"item 6" : [ "subitem 6.1", "subitem 6.2" ]
		};
	</script>
	<script type="text/javascript" charset="utf-8">
		function selectAll(listName, selected) {
			var listBox = document.getElementById(listName);
			for(i=0; i<listBox.length; i++) {
				listBox.options[i].selected=selected;
			}
			if( listBox.onchange ) {
				listBox.onchange();
			}
		}
		function lstStuff_OnChange() {
			var listBox = document.getElementById("lstStuff");
			var subListBox = document.getElementById("lstOtherStuff");
			subListBox.options.length=0;
			for(i=0; i<listBox.length; i++) {
				if( listBox.options[i].selected ) {
					var key = listBox.options[i].text;
					if(otherStuff[key]) {
						for(j=0; j<otherStuff[key].length; j++) {
							subListBox.options.add(new Option(otherStuff[key][j],otherStuff[key][j]));
						}
					}
				}
			}
		}
	</script>
</body>
</html>