Full version: jsB@nk » Form » Dropdown » Adding Options 2
URL: https://www.javascriptbank.com/adding-options-2.html
Add or change options on a form select menu. This JavaScript will also allow sub-group items, for additional selections.
Full version: jsB@nk » Form » Dropdown » Adding Options 2
URL: https://www.javascriptbank.com/adding-options-2.html
<script language="javascript">// Created by: Carl Leiby - http://leibys-place.comvar 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--><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-->