Jump to content

Multiple Select Boxes


Recommended Posts

<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 parametersdisplaywhenempty=""valuewhenempty=-1displaywhennotempty="-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><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><p align="center">This free script provided by<br /><a href="http://javascriptkit.com">JavaScriptKit</a></p>

Hey guys.How do you make so the boxes appear AFTER you select?Also, how do I store the information in the fourth combo box so I can use it in a variable later in PHP?I mean something like "data_2_2_1_2 = new Option("2212","$50")" ?Or maybe a submit box and when you press it the last variable appearsThank you!

Edited by dezkit
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...