// 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>
