Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New to the CF scene
    Join Date
    Jul 2009
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts

    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.

  • #2
    Senior Coder ckeyrouz's Avatar
    Join Date
    Jun 2009
    Location
    Montreal, Canada
    Posts
    1,044
    Thanks
    5
    Thanked 179 Times in 179 Posts
    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 = "";
       }
    }

  • Users who have thanked ckeyrouz for this post:

    dezkit (07-24-2009)

  • #3
    New to the CF scene
    Join Date
    Jul 2009
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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.

  • #4
    Senior Coder ckeyrouz's Avatar
    Join Date
    Jun 2009
    Location
    Montreal, Canada
    Posts
    1,044
    Thanks
    5
    Thanked 179 Times in 179 Posts
    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 = "";
       }
    }

  • #5
    New to the CF scene
    Join Date
    Jul 2009
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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!!

  • #6
    Senior Coder ckeyrouz's Avatar
    Join Date
    Jun 2009
    Location
    Montreal, Canada
    Posts
    1,044
    Thanks
    5
    Thanked 179 Times in 179 Posts
    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 = "";
       }
    }

  • Users who have thanked ckeyrouz for this post:

    dezkit (07-24-2009)

  • #7
    New to the CF scene
    Join Date
    Jul 2009
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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

  • #8
    Senior Coder ckeyrouz's Avatar
    Join Date
    Jun 2009
    Location
    Montreal, Canada
    Posts
    1,044
    Thanks
    5
    Thanked 179 Times in 179 Posts
    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;
       }
    }

  • #9
    New to the CF scene
    Join Date
    Jul 2009
    Posts
    5
    Thanks
    2
    Thanked 0 Times in 0 Posts
    It works. Thanks once again haha.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •