« »

Add or change options on a form select menu. This JavaScript will also allow sub-group items, for additional selections.

Label: Adding Options 2

Report to us error of this JavaScript

Demo
Enlarge
Reload
New window

Code
JavaScript
HTML
Print

Copy All x2

<script language="javascript">
// Created by: 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]));
        }
      }
    }
  }
}

</script>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Copy All x2

<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>
		<br><br>
		<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>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->