Full version: jsB@nk » Form » Dropdown » Multiple Dynamic Combo Boxes
URL: https://www.javascriptbank.com/multiple-dynamic-combo-boxes.html
This lightweight yet powerful script lets you create multiple (unlimited) combo boxes, with each one linked and dependant on the one proceeding it. Very nice.
Full version: jsB@nk » Form » Dropdown » Multiple Dynamic Combo Boxes
URL: https://www.javascriptbank.com/multiple-dynamic-combo-boxes.html
<script language="JavaScript" type="text/javascript"><!--/**** Multiple dynamic combo boxes*** by Mirko Elviro, 9 Mar 2005*** Script featured and available on JavaScript Kit (http://www.javascriptkit.com)******Please do not remove this comment*/// This script supports an unlimited number of linked combo boxed// Their id must be "combo_0", "combo_1", "combo_2" etc.// Here you have to put the data that will fill the combo boxes// ie. data_2_1 will be the first option in the second combo box// when the first combo box has the second option selected// first combo boxdata_1 = new Option("1", "$");data_2 = new Option("2", "$$");// second combo boxdata_1_1 = new Option("11", "-");data_1_2 = new Option("12", "-");data_2_1 = new Option("21", "--");data_2_2 = new Option("22", "--");data_2_3 = new Option("23", "--");data_2_4 = new Option("24", "--");data_2_5 = new Option("25", "--");// third combo boxdata_1_1_1 = new Option("111", "*");data_1_1_2 = new Option("112", "*");data_1_1_3 = new Option("113", "*");data_1_2_1 = new Option("121", "*");data_1_2_2 = new Option("122", "*");data_1_2_3 = new Option("123", "*");data_1_2_4 = new Option("124", "*");data_2_1_1 = new Option("211", "**");data_2_1_2 = new Option("212", "**");data_2_2_1 = new Option("221", "**");data_2_2_2 = new Option("222", "**");data_2_3_1 = new Option("231", "***");data_2_3_2 = new Option("232", "***");// fourth combo boxdata_2_2_1_1 = new Option("2211","%")data_2_2_1_2 = new Option("2212","%%")// other parameters displaywhenempty="" valuewhenempty=-1 displaywhennotempty="-select-" valuewhennotempty=0function change(currentbox) {numb = currentbox.id.split("_");currentbox = numb[1]; i=parseInt(currentbox)+1// I empty all combo boxes following the current one while ((eval("typeof(document.getElementById(\"combo_"+i+"\"))!='undefined'")) && (document.getElementById("combo_"+i)!=null)) { son = document.getElementById("combo_"+i); // I empty all options except the first one (it isn't allowed) for (m=son.options.length-1;m>0;m--) son.options[m]=null; // I reset the first option son.options[0]=new Option(displaywhenempty,valuewhenempty) i=i+1 }// now I create the string with the "base" name ("stringa"), ie. "data_1_0"// to which I'll add _0,_1,_2,_3 etc to obtain the name of the combo box to fill stringa='data' i=0 while ((eval("typeof(document.getElementById(\"combo_"+i+"\"))!='undefined'")) && (document.getElementById("combo_"+i)!=null)) { eval("stringa=stringa+'_'+document.getElementById(\"combo_"+i+"\").selectedIndex") if (i==currentbox) break; i=i+1 }// filling the "son" combo (if exists) following=parseInt(currentbox)+1 if ((eval("typeof(document.getElementById(\"combo_"+following+"\"))!='undefined'")) && (document.getElementById("combo_"+following)!=null)) { son = document.getElementById("combo_"+following); stringa=stringa+"_" i=0 while ((eval("typeof("+stringa+i+")!='undefined'")) || (i==0)) { // if there are no options, I empty the first option of the "son" combo // otherwise I put "-select-" in it if ((i==0) && eval("typeof("+stringa+"0)=='undefined'")) if (eval("typeof("+stringa+"1)=='undefined'")) eval("son.options[0]=new Option(displaywhenempty,valuewhenempty)") else eval("son.options[0]=new Option(displaywhennotempty,valuewhennotempty)") else eval("son.options["+i+"]=new Option("+stringa+i+".text,"+stringa+i+".value)") i=i+1 } //son.focus() i=1 combostatus='' cstatus=stringa.split("_") while (cstatus[i]!=null) { combostatus=combostatus+cstatus[i] i=i+1 } return combostatus; }}//--></script><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><form><select name="combo0" id="combo_0" onChange="change(this);" style="width:200px;"><option value="value1">-select-</option><option value="value2">1</option><option value="value3">2</option></select><BR><BR><select name="combo1" id="combo_1" onChange="change(this)" style="width:200px;"><option value="value1"> </option></select><BR><BR><select name="combo2" id="combo_2" onChange="change(this);" style="width:200px;"><option value="value1"> </option></select><BR><BR><select name="combo3" id="combo_3" onChange="change(this);" style="width:200px;"><option value="value1"> </option></select></form><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->