Multiple Select Boxes

[dezkit]

<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("1", "$");
data_2 = new Option("2", "$$");

// second combo box

data_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 box

data_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 box

data_2_2_1_1 = new Option("2211","%")
data_2_2_1_2 = new Option("2212","%%")

// other parameters

    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>

<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">JavaScript
Kit</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")" ?

Thank you!

[dezkit]

Or maybe a submit box and when you press it the last variable appears

[Psycho]

You need to be more specific. I think I understand your first questionabout making the secondary lists appearing AFTER you make a selection in the parent. You just need to set the display or visibility values as none or hidden respectively. Display and visibility are treated very differently based on form submissions so you would need to determine which is correct. As long as you will only allow the user to submit after all have been displayed it won't matter except that display will make content move on the page and visibility will hide the elements but not shift the other content.

 

But, I have no idea about the second part of your request. The form fields are automatically available to PHP on submission as long as you have a proper form. And what do you mean about the last variable appearing after clicking a submit box (er. button?)

[dezkit]

You need to be more specific. I think I understand your first questionabout making the secondary lists appearing AFTER you make a selection in the parent. You just need to set the display or visibility values as none or hidden respectively. Display and visibility are treated very differently based on form submissions so you would need to determine which is correct. As long as you will only allow the user to submit after all have been displayed it won't matter except that display will make content move on the page and visibility will hide the elements but not shift the other content.

 

But, I have no idea about the second part of your request. The form fields are automatically available to PHP on submission as long as you have a proper form. And what do you mean about the last variable appearing after clicking a submit box (er. button?)

 

Thanks for the reply, here I'll simplify it, I don't understand what I wrote as well. Haha.

 

You see how the first box says "-select-"?

Well I want to do so when I press a field such as "1" it will show another box below the first one saying "11", then another box appears below says "111".

And so If I pressed a field such as 2 in box one, it will show another box below saying "21", and it stops there, depending on the amount of data the groups have.

Group 1: 1, 11, 111

Group 2: 2, 21, 211

etc.

 

And now for the 2nd part:

You see how it says "data_2_2_1_2 = new Option("2212","%%")" in the last column? Well is it possible to put a number instead of the "%%"s and then when a person presses a submit button with the value of "Calculate", the value will be visible below.

 

I hope that makes it clearer, Thanks again for the reply.

 

 

[dezkit]

Bump

[vineld]

If your values in the subsequent selects don't change depending on what you've chosen in the previous one then simply change the display or visibility css attributes using javascript and add an onchange event to the selects of relevance.

 

If you need to fill the selects with new values from a database depending on what the user has selected in the previous ones then Ajax is your neatest solution.