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
Dynamic Select Example
// 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>
