Select: all | none


Select: all | none


To use this script follow the directions below

: Add this code to a blank file and call it "addingOptions.js":

  /* http://javascripts.com
  Carl Leiby | http://leibys-place.com/ */
  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" ]
  };
  
  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]));
          }
        }
      }
    }
  }

Add this to the <head> tag:

  <script type="text/javascript" src="addingOptions.js"></script>

Add this to the <body> tag:

  <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 (No Sub-Items)</OPTION>
   			<OPTION>item 4</OPTION>
   			<OPTION>item 5 (No Sub-Items)</OPTION>
   			<OPTION>item 6</OPTION>			
  		</SELECT>	
  		<BR>Select: 
  		<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>Select: 
  		<A HREF="javascript:selectAll('lstOtherStuff', true);">all</A> |
  		<A HREF="javascript:selectAll('lstOtherStuff', false);">none</A>
  </FORM>