Dynamic Select Example
// Example of JavaScript to with with Select Options
1 2 <html> 3 <head> 4 <title>test</title> 5 </head> 6 <body id="test" onload=""> 7 <form> 8 <select id="lstStuff" multiple="multiple" onChange="lstStuff_OnChange()" size="6" style="width:200px;"> 9 <option>item 1</option> 10 <option>item 2</option> 11 <option>item 3</option> 12 <option>item 4</option> 13 <option>item 5</option> 14 <option>item 6</option> 15 </select> 16 <br/> 17 <a href="javascript:selectAll('lstStuff', true);">all</a> 18 <a href="javascript:selectAll('lstStuff', false);">none</a> 19 <p/> 20 <select id="lstOtherStuff" multiple="multiple" size="6" style="width:200px;"> 21 </select> 22 <br/> 23 <a href="javascript:selectAll('lstOtherStuff', true);">all</a> 24 <a href="javascript:selectAll('lstOtherStuff', false);">none</a> 25 </form> 26 <script type="text/javascript" charset="utf-8"> 27 var otherStuff = { 28 "item 1" : [ "subitem 1.1", "subitem 1.2", "subitem 1.3", "subitem 1.4" ], 29 "item 2" : [ "subitem 2.1", "subitem 2.2" ], 30 "item 4" : [ "subitem 4" ], 31 "item 6" : [ "subitem 6.1", "subitem 6.2" ] 32 }; 33 </script> 34 <script type="text/javascript" charset="utf-8"> 35 function selectAll(listName, selected) { 36 var listBox = document.getElementById(listName); 37 for(i=0; i<listBox.length; i++) { 38 listBox.options[i].selected=selected; 39 } 40 if( listBox.onchange ) { 41 listBox.onchange(); 42 } 43 } 44 function lstStuff_OnChange() { 45 var listBox = document.getElementById("lstStuff"); 46 var subListBox = document.getElementById("lstOtherStuff"); 47 subListBox.options.length=0; 48 for(i=0; i<listBox.length; i++) { 49 if( listBox.options[i].selected ) { 50 var key = listBox.options[i].text; 51 if(otherStuff[key]) { 52 for(j=0; j<otherStuff[key].length; j++) { 53 subListBox.options.add(new Option(otherStuff[key][j],otherStuff[key][j])); 54 } 55 } 56 } 57 } 58 } 59 </script> 60 </body> 61 </html> 62
