Go Back   CodingForums.com > :: Client side development > JavaScript programming
Reload this Page Multiple Select Boxes

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 07-24-2009, 08:13 PM   PM User | #1
dezkit
New to the CF scene

 
Join Date: Jul 2009
Posts: 5
Thanks: 2
Thanked 0 Times in 0 Posts
dezkit is an unknown quantity at this point
Multiple Select Boxes
Code:
<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 box

	data_1 = new Option("Business Cards", 	"$");
	data_2 = new Option("Club Flyers", 	"$$");
	data_3 = new Option("Calendars", 	"$$$");
	data_4 = new Option("Post Cards", 	"$$$$");
	data_5 = new Option("Labels", 		"$$$$$");
	data_6 = new Option("Brochures", 	"$$$$$$");
	data_7 = new Option("Websites", 	"$$$$$$$");
	data_8 = new Option("CD Inserts", 	"$$$$$$$$");
	data_9 = new Option("Logo", 		"$$$$$$$$$");


// second combo box

	data_1_1 = new Option("14PT C2S (Gloss Cover)", "-");
	data_1_2 = new Option("16PT C2S (Gloss Cover)", "-");
	data_2_1 = new Option("14PT C2S (Gloss Cover)", "-");
	data_2_2 = new Option("16PT C2S (Gloss Cover)", "-");

// third combo box

	data_1_1_1 = new Option("Size: 3.5inx2in", "*");
	data_1_2_1 = new Option("Size: 3.5inx2in", "*");
	data_2_1_1 = new Option("Size: 4.25 x 5.5", "*");
	data_2_2_1 = new Option("Size: 4.25 x 5.5", "*");
	

// fourth combo box

	data_1_1_1_1 = new Option("Color: 4/0 (full color front side)","=");
	data_1_2_1_1 = new Option("Color: 4/4 (full color front side)","=");
	data_2_1_1_1 = new Option("Color: 4/4 (Full Color Both Sides)","=");
	data_2_2_1_1 = new Option("Color: 4/4 (Full Color Both Sides)","=");

// other parameters

	data_1_1_1_1_1 = new Option("Coating: UV 1 Side (Super Hi-Gloss)","!");
	data_1_2_1_1_1 = new Option("Coating: UV 2 Sides (Super Hi-Gloss)","!");
	data_2_1_1_1_1 = new Option("Coating: UV 1 Side (Super Hi-Gloss)","!");
	data_2_2_1_1_1 = new Option("Coating: UV 2 Sides (Super Hi-Gloss)","!");

// other parameters

	data_1_1_1_1_1_1 = new Option("Quantity: 500","$35");
	data_1_1_1_1_1_2 = new Option("Quantity: 1,000","$55");
	data_1_1_1_1_1_3 = new Option("Quantity: 2,500","$75");
	data_1_1_1_1_1_4 = new Option("Quantity: 5,000","$95");

	data_1_2_1_1_1_1 = new Option("Quantity: 1,000","$65");
	data_1_2_1_1_1_2 = new Option("Quantity: 2,500","$95");
	data_1_2_1_1_1_3 = new Option("Quantity: 5,000","$115");
	data_1_2_1_1_1_4 = new Option("Quantity: 10,000","$185");




	data_2_1_1_1_1_1 = new Option("Quantity: 250","$55");
	data_2_1_1_1_1_2 = new Option("Quantity: 500","$65");
	data_2_1_1_1_1_3 = new Option("Quantity: 1,000","$85");
	data_2_1_1_1_1_4 = new Option("Quantity: 2,500","$125");
	data_2_1_1_1_1_5 = new Option("Quantity: 5,000","$185");

	data_2_2_1_1_1_1 = new Option("Quantity: 1,000","$65");
	data_2_2_1_1_1_2 = new Option("Quantity: 2,500","$95");
	data_2_2_1_1_1_3 = new Option("Quantity: 5,000","$115");
	data_2_2_1_1_1_4 = new Option("Quantity: 10,000","$185");

    displaywhenempty=""
    valuewhenempty=-1

    displaywhennotempty="-select-"
    valuewhennotempty=0


function 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>
<p>
<form style="padding:0 38px 10px 38px;">
<select name="combo0" id="combo_0" onChange="change(this);" style="width:200px;">
	<option value="value1">-select-</option>
	<option value="value2">Business Cards</option>
	<option value="value3">Club Flyers</option>
	<option value="value4">Calendars</option>
	<option value="value5">Post Cards</option>
	<option value="value6">Labels</option>
	<option value="value7">Brochures</option>
	<option value="value8">Websites</option>
	<option value="value9">CD Inserts</option>
	<option value="value10">Logo</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>
<BR><BR>
<select name="combo4" id="combo_4" onChange="change(this);" style="width:200px;">
	<option value="value1">  </option>

</select>

<BR><BR>
<select name="combo5" id="combo_5" onChange="change(this);" style="width:200px;">
	<option value="value1">  </option>

</select>


</form>
</p>
Hey guys,
I have this code, and I was wondering if it is possible to make the select boxes appear AFTER you select the field before.
Thank you so much.
dezkit is offline   Reply With Quote
Old 07-24-2009, 08:22 PM   PM User | #2
ckeyrouz
Senior Coder

 
ckeyrouz's Avatar
 
Join Date: Jun 2009
Location: Montreal, Canada
Posts: 1,044
Thanks: 5
Thanked 179 Times in 179 Posts
ckeyrouz is on a distinguished road
change your html code to the following:

Code:
<p>
<form style="padding:0 38px 10px 38px;">
<select name="combo0" id="combo_0" onChange="change(this);" style="width:200px;" dependant="combo_1">
	<option value="value1">-select-</option>
	<option value="value2">Business Cards</option>
	<option value="value3">Club Flyers</option>
	<option value="value4">Calendars</option>
	<option value="value5">Post Cards</option>
	<option value="value6">Labels</option>
	<option value="value7">Brochures</option>
	<option value="value8">Websites</option>
	<option value="value9">CD Inserts</option>
	<option value="value10">Logo</option>

</select>
<BR><BR>
<select name="combo1" id="combo_1" onChange="change(this)" style="width:200px;display:none" dependant="combo_2">
	<option value="value1">  </option>
</select>
<BR><BR>
<select name="combo2" id="combo_2" onChange="change(this);" style="width:200px;display:none" dependant="combo_3">
	<option value="value1">  </option>
</select>
<BR><BR>
<select name="combo3" id="combo_3" onChange="change(this);" style="width:200px;display:none" dependant="combo_4">
	<option value="value1">  </option>

</select>
<BR><BR>
<select name="combo4" id="combo_4" onChange="change(this);" style="width:200px;display:none" dependant="combo_5">
	<option value="value1">  </option>

</select>

<BR><BR>
<select name="combo5" id="combo_5" onChange="change(this);" style="width:200px;display:none" dependant="combo_6">
	<option value="value1">  </option>

</select>


</form>
</p>
and then your js code at the beginning of your function change(currentbox) do the following:
Code:
function change(currentbox) 
{
  handleDependencies(currentbox);

and then add this new function:

Code:
function handleDependencies(currentbox)
{
   if(document.getElementById(currentbox) != null)
   {
      document.getElementById(currentbox) .style.display = "";
   }
}
ckeyrouz is offline   Reply With Quote
Users who have thanked ckeyrouz for this post:
dezkit (07-24-2009)
Old 07-24-2009, 08:29 PM   PM User | #3
dezkit
New to the CF scene

 
Join Date: Jul 2009
Posts: 5
Thanks: 2
Thanked 0 Times in 0 Posts
dezkit is an unknown quantity at this point
Hello ckeyrouz, thanks for the reply, but I'm afraid it doesn't work.
It shows only 1 select box and when I select a field nothing happens.
Here is my current code:
Code:
<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 box

	data_1 = new Option("Business Cards", 	"$");
	data_2 = new Option("Club Flyers", 	"$$");
	data_3 = new Option("Calendars", 	"$$$");
	data_4 = new Option("Post Cards", 	"$$$$");
	data_5 = new Option("Labels", 		"$$$$$");
	data_6 = new Option("Brochures", 	"$$$$$$");
	data_7 = new Option("Websites", 	"$$$$$$$");
	data_8 = new Option("CD Inserts", 	"$$$$$$$$");
	data_9 = new Option("Logo", 		"$$$$$$$$$");


// second combo box

	data_1_1 = new Option("14PT C2S (Gloss Cover)", "-");
	data_1_2 = new Option("16PT C2S (Gloss Cover)", "-");
	data_2_1 = new Option("14PT C2S (Gloss Cover)", "-");
	data_2_2 = new Option("16PT C2S (Gloss Cover)", "-");

// third combo box

	data_1_1_1 = new Option("Size: 3.5inx2in", "*");
	data_1_2_1 = new Option("Size: 3.5inx2in", "*");
	data_2_1_1 = new Option("Size: 4.25 x 5.5", "*");
	data_2_2_1 = new Option("Size: 4.25 x 5.5", "*");
	

// fourth combo box

	data_1_1_1_1 = new Option("Color: 4/0 (full color front side)","=");
	data_1_2_1_1 = new Option("Color: 4/4 (full color front side)","=");
	data_2_1_1_1 = new Option("Color: 4/4 (Full Color Both Sides)","=");
	data_2_2_1_1 = new Option("Color: 4/4 (Full Color Both Sides)","=");

// other parameters

	data_1_1_1_1_1 = new Option("Coating: UV 1 Side (Super Hi-Gloss)","!");
	data_1_2_1_1_1 = new Option("Coating: UV 2 Sides (Super Hi-Gloss)","!");
	data_2_1_1_1_1 = new Option("Coating: UV 1 Side (Super Hi-Gloss)","!");
	data_2_2_1_1_1 = new Option("Coating: UV 2 Sides (Super Hi-Gloss)","!");

// other parameters

	data_1_1_1_1_1_1 = new Option("Quantity: 500","$35");
	data_1_1_1_1_1_2 = new Option("Quantity: 1,000","$55");
	data_1_1_1_1_1_3 = new Option("Quantity: 2,500","$75");
	data_1_1_1_1_1_4 = new Option("Quantity: 5,000","$95");

	data_1_2_1_1_1_1 = new Option("Quantity: 1,000","$65");
	data_1_2_1_1_1_2 = new Option("Quantity: 2,500","$95");
	data_1_2_1_1_1_3 = new Option("Quantity: 5,000","$115");
	data_1_2_1_1_1_4 = new Option("Quantity: 10,000","$185");




	data_2_1_1_1_1_1 = new Option("Quantity: 250","$55");
	data_2_1_1_1_1_2 = new Option("Quantity: 500","$65");
	data_2_1_1_1_1_3 = new Option("Quantity: 1,000","$85");
	data_2_1_1_1_1_4 = new Option("Quantity: 2,500","$125");
	data_2_1_1_1_1_5 = new Option("Quantity: 5,000","$185");

	data_2_2_1_1_1_1 = new Option("Quantity: 1,000","$65");
	data_2_2_1_1_1_2 = new Option("Quantity: 2,500","$95");
	data_2_2_1_1_1_3 = new Option("Quantity: 5,000","$115");
	data_2_2_1_1_1_4 = new Option("Quantity: 10,000","$185");

    displaywhenempty=""
    valuewhenempty=-1

    displaywhennotempty="-select-"
    valuewhennotempty=0

function handleDependencies(currentbox)
{
   if(document.getElementById(currentbox) != null)
   {
      document.getElementById(currentbox) .style.display = "";
   }
}

function change(currentbox) 
{
  handleDependencies(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>
<p>
<form style="padding:0 38px 10px 38px;">
<select name="combo0" id="combo_0" onChange="change(this);" style="width:200px;" dependant="combo_1">
	<option value="value1">-select-</option>
	<option value="value2">Business Cards</option>
	<option value="value3">Club Flyers</option>
	<option value="value4">Calendars</option>
	<option value="value5">Post Cards</option>
	<option value="value6">Labels</option>
	<option value="value7">Brochures</option>
	<option value="value8">Websites</option>
	<option value="value9">CD Inserts</option>
	<option value="value10">Logo</option>

</select>
<BR><BR>
<select name="combo1" id="combo_1" onChange="change(this)" style="width:200px;display:none" dependant="combo_2">
	<option value="value1">  </option>
</select>
<BR><BR>
<select name="combo2" id="combo_2" onChange="change(this);" style="width:200px;display:none" dependant="combo_3">
	<option value="value1">  </option>
</select>
<BR><BR>
<select name="combo3" id="combo_3" onChange="change(this);" style="width:200px;display:none" dependant="combo_4">
	<option value="value1">  </option>

</select>
<BR><BR>
<select name="combo4" id="combo_4" onChange="change(this);" style="width:200px;display:none" dependant="combo_5">
	<option value="value1">  </option>

</select>

<BR><BR>
<select name="combo5" id="combo_5" onChange="change(this);" style="width:200px;display:none" dependant="combo_6">
	<option value="value1">  </option>

</select>


</form>
</p>
Last edited by dezkit; 07-24-2009 at 08:32 PM..
dezkit is offline   Reply With Quote
Old 07-24-2009, 08:56 PM   PM User | #4
ckeyrouz
Senior Coder

 
ckeyrouz's Avatar
 
Join Date: Jun 2009
Location: Montreal, Canada
Posts: 1,044
Thanks: 5
Thanked 179 Times in 179 Posts
ckeyrouz is on a distinguished road
excuse me it is something I missed in my code:

your function handleDependencies should be like this:
Code:
function handleDependencies(currentbox)
{

   
   if(document.getElementById(currentbox.dependant) != null)
   {
      document.getElementById(currentbox.dependant) .style.display = "";
   }
}
ckeyrouz is offline   Reply With Quote
Old 07-24-2009, 09:16 PM   PM User | #5
dezkit
New to the CF scene

 
Join Date: Jul 2009
Posts: 5
Thanks: 2
Thanked 0 Times in 0 Posts
dezkit is an unknown quantity at this point
Meh, it still doesn't work haha.

Code:
Code:
<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 box

	data_1 = new Option("Business Cards", 	"$");
	data_2 = new Option("Club Flyers", 	"$$");
	data_3 = new Option("Calendars", 	"$$$");
	data_4 = new Option("Post Cards", 	"$$$$");
	data_5 = new Option("Labels", 		"$$$$$");
	data_6 = new Option("Brochures", 	"$$$$$$");
	data_7 = new Option("Websites", 	"$$$$$$$");
	data_8 = new Option("CD Inserts", 	"$$$$$$$$");
	data_9 = new Option("Logo", 		"$$$$$$$$$");


// second combo box

	data_1_1 = new Option("14PT C2S (Gloss Cover)", "-");
	data_1_2 = new Option("16PT C2S (Gloss Cover)", "-");
	data_2_1 = new Option("14PT C2S (Gloss Cover)", "-");
	data_2_2 = new Option("16PT C2S (Gloss Cover)", "-");

// third combo box

	data_1_1_1 = new Option("Size: 3.5inx2in", "*");
	data_1_2_1 = new Option("Size: 3.5inx2in", "*");
	data_2_1_1 = new Option("Size: 4.25 x 5.5", "*");
	data_2_2_1 = new Option("Size: 4.25 x 5.5", "*");
	

// fourth combo box

	data_1_1_1_1 = new Option("Color: 4/0 (full color front side)","=");
	data_1_2_1_1 = new Option("Color: 4/4 (full color front side)","=");
	data_2_1_1_1 = new Option("Color: 4/4 (Full Color Both Sides)","=");
	data_2_2_1_1 = new Option("Color: 4/4 (Full Color Both Sides)","=");

// other parameters

	data_1_1_1_1_1 = new Option("Coating: UV 1 Side (Super Hi-Gloss)","!");
	data_1_2_1_1_1 = new Option("Coating: UV 2 Sides (Super Hi-Gloss)","!");
	data_2_1_1_1_1 = new Option("Coating: UV 1 Side (Super Hi-Gloss)","!");
	data_2_2_1_1_1 = new Option("Coating: UV 2 Sides (Super Hi-Gloss)","!");

// other parameters

	data_1_1_1_1_1_1 = new Option("Quantity: 500","$35");
	data_1_1_1_1_1_2 = new Option("Quantity: 1,000","$55");
	data_1_1_1_1_1_3 = new Option("Quantity: 2,500","$75");
	data_1_1_1_1_1_4 = new Option("Quantity: 5,000","$95");

	data_1_2_1_1_1_1 = new Option("Quantity: 1,000","$65");
	data_1_2_1_1_1_2 = new Option("Quantity: 2,500","$95");
	data_1_2_1_1_1_3 = new Option("Quantity: 5,000","$115");
	data_1_2_1_1_1_4 = new Option("Quantity: 10,000","$185");




	data_2_1_1_1_1_1 = new Option("Quantity: 250","$55");
	data_2_1_1_1_1_2 = new Option("Quantity: 500","$65");
	data_2_1_1_1_1_3 = new Option("Quantity: 1,000","$85");
	data_2_1_1_1_1_4 = new Option("Quantity: 2,500","$125");
	data_2_1_1_1_1_5 = new Option("Quantity: 5,000","$185");

	data_2_2_1_1_1_1 = new Option("Quantity: 1,000","$65");
	data_2_2_1_1_1_2 = new Option("Quantity: 2,500","$95");
	data_2_2_1_1_1_3 = new Option("Quantity: 5,000","$115");
	data_2_2_1_1_1_4 = new Option("Quantity: 10,000","$185");

    displaywhenempty=""
    valuewhenempty=-1

    displaywhennotempty="-select-"
    valuewhennotempty=0

function handleDependencies(currentbox)
{
   if(document.getElementById(currentbox.dependant) != null)
   {
      document.getElementById(currentbox.dependant) .style.display = "";
   }
}


function change(currentbox) 
{
  	handleDependencies(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>
<p>
<form style="padding:0 38px 10px 38px;">
<select name="combo0" id="combo_0" onChange="change(this);" style="width:200px;" dependant="combo_1">
	<option value="value1">-select-</option>
	<option value="value2">Business Cards</option>
	<option value="value3">Club Flyers</option>
	<option value="value4">Calendars</option>
	<option value="value5">Post Cards</option>
	<option value="value6">Labels</option>
	<option value="value7">Brochures</option>
	<option value="value8">Websites</option>
	<option value="value9">CD Inserts</option>
	<option value="value10">Logo</option>

</select>
<BR><BR>
<select name="combo1" id="combo_1" onChange="change(this)" style="width:200px;display:none" dependant="combo_2">
	<option value="value1">  </option>
</select>
<BR><BR>
<select name="combo2" id="combo_2" onChange="change(this);" style="width:200px;display:none" dependant="combo_3">
	<option value="value1">  </option>
</select>
<BR><BR>
<select name="combo3" id="combo_3" onChange="change(this);" style="width:200px;display:none" dependant="combo_4">
	<option value="value1">  </option>

</select>
<BR><BR>
<select name="combo4" id="combo_4" onChange="change(this);" style="width:200px;display:none" dependant="combo_5">
	<option value="value1">  </option>

</select>

<BR><BR>
<select name="combo5" id="combo_5" onChange="change(this);" style="width:200px;display:none" dependant="combo_6">
	<option value="value1">  </option>

</select>


</form>
</p>
Thanks again, and so much thanks!!
dezkit is offline   Reply With Quote
Old 07-24-2009, 09:25 PM   PM User | #6
ckeyrouz
Senior Coder

 
ckeyrouz's Avatar
 
Join Date: Jun 2009
Location: Montreal, Canada
Posts: 1,044
Thanks: 5
Thanked 179 Times in 179 Posts
ckeyrouz is on a distinguished road
So dumb of me, I test it in IE (F ********)
now the solution is cross-browser:

your function handleDependencies should be like this:
Code:
function handleDependencies(currentbox)
{
   if(document.getElementById(currentbox.getAttribute("dependant")) != null)
   {
      document.getElementById(currentbox.getAttribute("dependant")) .style.display = "";
   }
}
ckeyrouz is offline   Reply With Quote
Users who have thanked ckeyrouz for this post:
dezkit (07-24-2009)
Old 07-24-2009, 09:30 PM   PM User | #7
dezkit
New to the CF scene

 
Join Date: Jul 2009
Posts: 5
Thanks: 2
Thanked 0 Times in 0 Posts
dezkit is an unknown quantity at this point
OMG it works now!
Thanks so much!
+Thanked User x1milion


By the way:
Is there a way to make a submit field by the value of "Calculate" and it shows the number in the 2nd value of Option, example:
Code:
 new Option("Quantity: 10,000","$185");
The number "$185" will appear after a submit box will be pressed.

Thanks so much, I feel like an *** f or asking so much questions. I am more of a server-side scripter :P
dezkit is offline   Reply With Quote
Old 07-24-2009, 09:57 PM   PM User | #8
ckeyrouz
Senior Coder

 
ckeyrouz's Avatar
 
Join Date: Jun 2009
Location: Montreal, Canada
Posts: 1,044
Thanks: 5
Thanked 179 Times in 179 Posts
ckeyrouz is on a distinguished road
First of all you do not have to feel anything because the purpose of this forum is to ask, get answers so we learn from each others and help each others.
As for what you have requested I think you can do this (I hope I understood well)

Change the following html code:
Code:
<select name="combo5" id="combo_5" onChange="change(this);" style="width:200px;display:none" dependant="combo_6">
	<option value="value1">  </option>

</select>
to the following:
Code:
<select name="combo5" id="combo_5" onChange="change(this);" setValue="true" style="width:200px;display:none" dependant="finalPrice">
	<option value="value1">  </option>

</select>
and add after it the following html code:
Code:
BR><BR>
<input type="text" onfocus="this.blur()" onChange="change(this);"  readonly="true" name="finalPrice" id="finalPrice" style="display:none;border-style:outset;background-color: #dddddd;border-top: 1px solid #999999;border-left: 1px solid #999999;border-right: 1px outset #333333;border-bottom: 1px outset #33333;	cursor: default;"/>
and change your handleDependencies function like this:

Code:
function handleDependencies(currentbox)
{
   if(document.getElementById(currentbox.getAttribute("dependant")) != null)
   {
      document.getElementById(currentbox.getAttribute("dependant")) .style.display = "";
   }
   if(currentbox.getAttribute("setValue") == "true")
   {
      document.getElementById(currentbox.getAttribute("dependant")).value = currentbox.options[currentbox.selectedIndex].value;
   }
}
ckeyrouz is offline   Reply With Quote
Old 07-24-2009, 10:03 PM   PM User | #9
dezkit
New to the CF scene

 
Join Date: Jul 2009
Posts: 5
Thanks: 2
Thanked 0 Times in 0 Posts
dezkit is an unknown quantity at this point
It works. Thanks once again haha.
dezkit is offline   Reply With Quote
Reply

Bookmarks

Jump To Top of Thread


« Previous Thread | Next Thread »
Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump


All times are GMT +1. The time now is 04:04 AM.
Advertisement
Log in to turn off these ads.