Multiple Select Boxes

<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.

change your html code to the following:

<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:
function change(currentbox)
{
handleDependencies(currentbox);



and then add this new function:


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

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

excuse me it is something I missed in my code:

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


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

Meh, it still doesn't work haha.

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!!

So dumb of me, I test it in IE (F ********)
now the solution is cross-browser:

your function handleDependencies should be like this:
function handleDependencies(currentbox)
{
if(document.getElementById(currentbox.getAttribute("dependant")) != null)
{
document.getElementById(currentbox.getAttribute("dependant")) .style.display = "";
}
}

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

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:

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

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;
}
}

It works. Thanks once again haha.