...

View Full Version : ComboBox(Quadrouple)...Help Needed



acrokos
08-05-2002, 04:51 PM
I would like to add a 4th combobox to the already popular ComboBoxTriple sample posted on http://wsabstract.com.

-----Copy this code

<html>
<head>
<title>ComboBoxQuad</title>
</head>
<body>

<FORM name="isc">
<table border="0" cellspacing="0" cellpadding="0">
<tr align="center">
<td nowrap height="11"> &nbsp;

<select name="stage1" size="1" style="font-family: Lucida Console,Verdana, Tahoma, Arial; font-size: 9"
onChange="redirect(this.options.selectedIndex)">
<option selected>---Select1-------------</option>
<option>1</option>
<option>2</option>
</select>

<select name="stage2" size="1" style="font-family: Lucida Console,Verdana, Tahoma, Arial; font-size: 9"
onChange="redirect1(this.options.selectedIndex)">
<option value=" " selected> </option>
<option value=" " selected>---Select2--------------</option>
<option value=" " selected>---Select2--------------</option>
</select>

<select name="stage3" size="1" style="font-family: Lucida Console,Verdana, Tahoma, Arial; font-size: 9"
onChange="redirect2(this.options.selectedIndex)">
<option value=" " selected> </option>
<option value=" " selected>---Select3----------------</option>
<option value=" " selected>---Select3----------------</option>
</select>

<select name="stage4" size="1" style="font-family: Lucida Console,Verdana, Tahoma, Arial; font-size: 9"
onChange="redirect3(this.options.selectedIndex)">
<option value=" " selected> </option>
<option value=" " selected>---Select4----------------</option>
<option value=" " selected>---Select4----------------</option>
</select>

<script>
<!--

/*
Triple Combo Script Credit
By Hamid Cheheltani/ Website Abstraction (http://www.wsabstract.com)
Visit http://wsabstract.com for this and over 400+ other scripts
*/

var groups=document.isc.stage1.options.length
var group=new Array(groups)
for (i=0; i<groups; i++){
group[i]=new Array()}

group[0][0]=new Option("---Select2---"," ");
group[1][0]=new Option("Now Select This One"," ");
group[1][1]=new Option("1.1","");
group[1][2]=new Option("1.2","");
group[2][0]=new Option("Now Select This One"," ");
group[2][1]=new Option("2.1","");
group[2][2]=new Option("2.2","");

var temp=document.isc.stage2
var secondGroups=document.isc.stage2.options.length
var secondGroup=new Array(groups)
for (i=0; i<groups; i++) {
secondGroup[i]=new Array(group[i].length)
for (j=0; j<group[i].length; j++) {
secondGroup[i][j]=new Array() }}

secondGroup[0][0][0]=new Option("---Select 3---"," ");
secondGroup[1][0][0]=new Option("---Select 3---"," ");
secondGroup[1][1][0]=new Option("Now Select This One"," ");
secondGroup[1][1][1]=new Option("1.1.1","");
secondGroup[1][1][2]=new Option("1.1.2","");
secondGroup[1][2][0]=new Option("Now Select This One"," ");
secondGroup[1][2][1]=new Option("1.2.1","");
secondGroup[1][2][2]=new Option("1.2.2","");
secondGroup[2][0][0]=new Option("---Select 3---"," ");
secondGroup[2][1][0]=new Option("Now Select This One"," ");
secondGroup[2][1][1]=new Option("2.1.1","");
secondGroup[2][1][2]=new Option("2.1.2","");
secondGroup[2][2][0]=new Option("Now Select This One"," ");
secondGroup[2][2][1]=new Option("2.2.1","");
secondGroup[2][2][2]=new Option("2.2.2","");

/*PROBLEM LIES HERE */
var temp1=document.isc.stage3
var thirdGroups=document.isc.stage3.options.length
var thirdGroup=new Array(groups)
for (i=0; i<groups; i++) {
thirdGroup[i]=new Array(group[i].length)
for (j=0; j<group[i].length; j++) {
thirdGroup[i][j]=new Array(secondGroup[i].length)
for (k=0; k<group[i].length; k++) {
thirdGroup[i][j][k]=new Array() }}}
/**/

thirdGroup[0][0][0][0]=new Option("---Select 4---"," ");
thirdGroup[1][0][0][0]=new Option("---Select 4---"," ");
thirdGroup[1][1][1][0]=new Option("Now Select A Page"," ");
thirdGroup[1][1][1][1]=new Option("1.1.1.1","http://www..com");
thirdGroup[1][1][1][2]=new Option("1.1.1.2","http://www..com");
thirdGroup[1][1][2][1]=new Option("1.1.2.1","http://www..com");
thirdGroup[1][1][2][2]=new Option("1.1.2.2","http://www..com");
thirdGroup[1][2][2][0]=new Option("Now Select A Page"," ");
thirdGroup[1][2][1][1]=new Option("1.2.1.1","http://www..com");
thirdGroup[1][2][1][2]=new Option("1.2.1.2","http://www..com");
thirdGroup[1][2][2][1]=new Option("1.2.2.1","http://www..com");
thirdGroup[1][2][2][2]=new Option("1.2.2.2","http://www..com");
thirdGroup[2][0][0][0]=new Option("---Select 4---"," ");
thirdGroup[2][1][1][0]=new Option("Now Select A Page"," ");
thirdGroup[2][1][1][1]=new Option("2.1.1.1","http://www..com");
thirdGroup[2][1][1][2]=new Option("2.1.1.2","http://www..com");
thirdGroup[2][1][2][1]=new Option("2.1.2.1","http://www..com");
thirdGroup[2][1][2][2]=new Option("2.1.2.2","http://www..com");
thirdGroup[2][2][2][0]=new Option("Now Select A Page"," ");
thirdGroup[2][2][1][1]=new Option("2.2.1.1","http://www..com");
thirdGroup[2][2][1][2]=new Option("2.2.1.2","http://www..com");
thirdGroup[2][2][2][1]=new Option("2.2.2.1","http://www..com");
thirdGroup[2][2][2][2]=new Option("2.2.2.2","http://www..com");

var temp2=document.isc.stage4

function redirect(x){
for (m=temp.options.length-1;m>0;m--)
temp.options[m]=null
for (i=0;i<group[x].length;i++){
temp.options[i]=new Option(group[x][i].text,group[x][i].value)
}
temp.options[0].selected=true
redirect1(0)
}

function redirect1(y){
for (m=temp1.options.length-1;m>0;m--)
temp1.options[m]=null
for (i=0;i<secondGroup[document.isc.stage1.options.selectedIndex][y].length;i++){
temp1.options[i]=new Option(secondGroup[document.isc.stage1.options.selectedIndex][y][i].text,secondGroup[document.isc.stage1.options.selectedIndex][y][i].value)
}
temp1.options[0].selected=true
redirect2(0)
}

function redirect2(z){
for (m=temp2.options.length-1;m>0;m--)
temp2.options[m]=null
for (i=0;i<thirdGroup[document.isc.stage1.options.selectedIndex][z].length;i++){
temp2.options[i]=new Option(thirdGroup[document.isc.stage1.options.selectedIndex][z][i].text,thirdGroup[document.isc.stage1.options.selectedIndex][z][i].value)
}
temp2.options[0].selected=true
}

function redirect3(z){
window.location=temp2[z].value
}

//-->
</script>
</td>
</tr>
</table>
</FORM>

<p>
<font face="arial" size="-2">This free script provided by</font><br>
<font face="arial, helvetica" size="-2"><a href="http://wsabstract.com">Website Abstraction</a></font>
</p>

</body>
</html>

jkd
08-05-2002, 08:11 PM
http://www.geocities.com/jason_yd/4combo.html

flying
09-21-2002, 03:42 AM
Struggling with the same conversion and can't seem to get it to work. The quad listed as answer doesn't seem to work on my computer, when I pull it up it won't change from category 1. Any suggestions?

acrokos
09-21-2002, 03:56 AM
This should do it...

<html>
<head>
<title>ComboBox[4]</title>
</head>
<body>

<FORM name="CBN">
<table border="0" cellspacing="0" cellpadding="0">
<tr align="center">
<td nowrap height="11"> &nbsp;

<select name="CBN1" size="1" style="font-family: Lucida Console,Verdana, Tahoma, Arial; font-size: 9"
onChange="ReDirect1(this.options.selectedIndex)">
<option selected>---Select1-------------</option>
<option>1</option>
<option>2</option>
</select>
<select name="CBN2" size="1" style="font-family: Lucida Console,Verdana, Tahoma, Arial; font-size: 9"
onChange="ReDirect2(this.options.selectedIndex)">
<option value=" " selected> </option>
<option value=" " selected>---Select2--------------</option>
<option value=" " selected>---Select2--------------</option>
</select>
<select name="CBN3" size="1" style="font-family: Lucida Console,Verdana, Tahoma, Arial; font-size: 9"
onChange="ReDirect3(this.options.selectedIndex)">
<option value=" " selected> </option>
<option value=" " selected>---Select3----------------</option>
<option value=" " selected>---Select3----------------</option>
</select>
<select name="CBN4" size="1" style="font-family: Lucida Console,Verdana, Tahoma, Arial; font-size: 9"
onChange="ReDirect(this.options.selectedIndex)">
<option value=" " selected> </option>
<option value=" " selected>---Select4----------------</option>
<option value=" " selected>---Select4----------------</option>
</select>
<script>
<!--

/* */
var temp=document.CBN.CBN2
var temp1=document.CBN.CBN3
var temp2=document.CBN.CBN4
var CB2=document.CBN.CBN1.options.length
var CB3=document.CBN.CBN2.options.length
var CB4=document.CBN.CBN3.options.length
var ComboBox2=new Array(CB2)
var ComboBox3=new Array(CB2)
var ComboBox4=new Array(CB2)

var maximum="12"
var max=eval(maximum-1)
/* */

for (a=0; a<=max; a++){
ComboBox2[a]=new Array()
}
for (b=0; b<=max; b++){
ComboBox3[b]=new Array()
for (c=0; c<=max; c++){
ComboBox3[b][c]=new Array()
}}
for (d=0; d<=max; d++){
ComboBox4[d]=new Array()
for (e=0; e<=max; e++){
ComboBox4[d][e]=new Array()
for (f=0;f<=max; f++){
ComboBox4[d][e][f]=new Array()
}}}

ComboBox2[0][0]=new Option("---Select2---"," ");
ComboBox2[1][0]=new Option("Now Select This One"," ");
ComboBox2[1][1]=new Option("1.1","");
ComboBox2[1][2]=new Option("1.2","");
ComboBox2[2][0]=new Option("Now Select This One"," ");
ComboBox2[2][1]=new Option("2.1","");
ComboBox2[2][2]=new Option("2.2","");
ComboBox3[0][0][0]=new Option("---Select 3---"," ");
ComboBox3[1][0][0]=new Option("---Select 3---"," ");
ComboBox3[1][1][0]=new Option("Now Select This One"," ");
ComboBox3[1][1][1]=new Option("1.1.1","");
ComboBox3[1][1][2]=new Option("1.1.2","");
ComboBox3[1][2][0]=new Option("Now Select This One"," ");
ComboBox3[1][2][1]=new Option("1.2.1","");
ComboBox3[1][2][2]=new Option("1.2.2","");
ComboBox3[2][0][0]=new Option("---Select 3---"," ");
ComboBox3[2][1][0]=new Option("Now Select This One"," ");
ComboBox3[2][1][1]=new Option("2.1.1","");
ComboBox3[2][1][2]=new Option("2.1.2","");
ComboBox3[2][2][0]=new Option("Now Select This One"," ");
ComboBox3[2][2][1]=new Option("2.2.1","");
ComboBox3[2][2][2]=new Option("2.2.2","");
ComboBox4[0][0][0][0]=new Option("---Select 4---"," ");
ComboBox4[1][0][0][0]=new Option("---Select 4---"," ");
ComboBox4[1][1][1][0]=new Option("Now Select A Page"," ");
ComboBox4[1][1][1][1]=new Option("1.1.1.1","http://www..com");
ComboBox4[1][1][1][2]=new Option("1.1.1.2","http://www..com");
ComboBox4[1][1][2][1]=new Option("1.1.2.1","http://www..com");
ComboBox4[1][1][2][2]=new Option("1.1.2.2","http://www..com");
ComboBox4[1][2][2][0]=new Option("Now Select A Page"," ");
ComboBox4[1][2][1][1]=new Option("1.2.1.1","http://www..com");
ComboBox4[1][2][1][2]=new Option("1.2.1.2","http://www..com");
ComboBox4[1][2][2][1]=new Option("1.2.2.1","http://www..com");
ComboBox4[1][2][2][2]=new Option("1.2.2.2","http://www..com");
ComboBox4[2][0][0][0]=new Option("---Select 4---"," ");
ComboBox4[2][1][1][0]=new Option("Now Select A Page"," ");
ComboBox4[2][1][1][1]=new Option("2.1.1.1","http://www..com");
ComboBox4[2][1][1][2]=new Option("2.1.1.2","http://www..com");
ComboBox4[2][1][2][1]=new Option("2.1.2.1","http://www..com");
ComboBox4[2][1][2][2]=new Option("2.1.2.2","http://www..com");
ComboBox4[2][2][2][0]=new Option("Now Select A Page"," ");
ComboBox4[2][2][1][1]=new Option("2.2.1.1","http://www..com");
ComboBox4[2][2][1][2]=new Option("2.2.1.2","http://www..com");
ComboBox4[2][2][2][1]=new Option("2.2.2.1","http://www..com");
ComboBox4[2][2][2][2]=new Option("2.2.2.2","http://www..com");
/* */
function ReDirect1(x){
for (m=temp.options.length-1;m>0;m--)
temp.options[m]=null
for (i=0;i<ComboBox2[x].length;i++){
temp.options[i]=new Option(ComboBox2[x][i].text,ComboBox2[x][i].value)
}
temp.options[0].selected=true
ReDirect2(0)
}
function ReDirect2(y){
var x=document.CBN.CBN1.options.selectedIndex
for (m=temp1.options.length-1;m>0;m--)
temp1.options[m]=null
for (i=0;i<ComboBox3[x][y].length;i++){
temp1.options[i]=new Option(ComboBox3[x][y][i].text,ComboBox3[x][y][i].value)
}
temp1.options[0].selected=true
ReDirect3(0)
}
function ReDirect3(z){
var x=document.CBN.CBN1.options.selectedIndex
var y=document.CBN.CBN2.options.selectedIndex
for (m=temp2.options.length-1;m>0;m--)
temp2.options[m]=null
for (i=0;i<ComboBox4[x][y][z].length;i++){
temp2.options[i]=new Option(ComboBox4[x][y][z][i].text,ComboBox4[x][y][z][i].value)
}
temp2.options[0].selected=true
}
function ReDirect(z){
window.location=temp2[z].value
}

//-->
</script>

</td>
</tr>
</table>
</FORM>

<p>
<br>
<font face="arial" size="-2">Thanks to Hamid Cheheltani and Jason Karl Davis of &nbsp; <a href="http://wsabstract.com">Website Abstraction</a> &nbsp; for providing this free script
</font>
</p>

</body>
</html>

flying
09-21-2002, 04:15 AM
Many thanks!!! I only wish I had asked you four days ago. You (along with Hamid Cheheltani and Jason Karl Davis ) and a godsend!

flying
09-21-2002, 05:36 AM
Next question:

I am using the quadruple combo so it prints to a form (which I already have set up). Therefore, I am using the text of each drop down rather than at the end having the page link to another. So, I end up with four blocks of info that are printed to the form.

Question:

Hypothetical: Can I repeat the drop down list from the same criteria and have another set of four results.

eg.

Original dropdown:

Choice 1 Choice 1, 4 Choice 1,4,3 Choice 1,4,3,3

Second dropdown:

Choice 2 Choice 2,3 Choice 2,3,4 Choice 2,3,4,1


So that my form will now show two sets of results:

1,4,3,3 and 2,3,4,1

Can this be done?

acrokos
09-21-2002, 05:49 PM
Post what you already have...I'm not sure I follow you.

flying
09-22-2002, 04:38 AM
acrocos, Thank you so much for replying. I did figure it out, I just had to fiddle with the coding a little.

flying
09-22-2002, 07:20 AM
Okay, here is the code I came up with - it runs slow as molasses. Any thoughts on whether I can speed this up?

<select name="order1" onChange="ReDirect1(this.options.selectedIndex)">
<option selected>---Select 1--------------</option>
<option>1</option>
<option>1</option>
</select>
<select name="order2" onChange="ReDirect2(this.options.selectedIndex)">
<option value=" " selected> </option>
<option value=" " selected>---Select 2--------------</option>
<option value=" " selected>---Select 2--------------</option>
</select>
<select name="order3" onChange="ReDirect3(this.options.selectedIndex)">
<option value=" " selected> </option>
<option value=" " selected>---Select 3--------------</option>
<option value=" " selected>---Select 3--------------</option>
</select>
<select name="order4" onChange="ReDirect(this.options.selectedIndex)">
<option value=" " selected> </option>
<option value=" " selected>---Select 4--------------</option>
<option value=" " selected>---Select 4--------------</option>
</select>
<BR>
<BR>
<select name="order11" onChange="ReDirect11(this.options.selectedIndex)">
<option selected>---Select 1-------------</option>
<option>1</option>
<option>2</option>
</select>
<select name="order21" onChange="ReDirect21(this.options.selectedIndex)">
<option value=" " selected> </option>
<option value=" " selected>---Select 2--------------</option>
<option value=" " selected>---Select 2--------------</option>
</select>
<select name="order31" onChange="ReDirect31(this.options.selectedIndex)">
<option value=" " selected> </option>
<option value=" " selected>---Select 3--------------</option>
<option value=" " selected>---Select 3--------------</option>
</select>
<select name="order41" onChange="ReDirect01(this.options.selectedIndex)">
<option value=" " selected> </option>
<option value=" " selected>---Select 4--------------</option>
<option value=" " selected>---Select 4--------------</option>
</select>
<BR>
<BR>
<select name="order12" onChange="ReDirect12(this.options.selectedIndex)">
<option selected>---Select 1-------------</option>
<option>1</option>
<option>2</option>
</select>
<select name="order22" onChange="ReDirect22(this.options.selectedIndex)">
<option value=" " selected> </option>
<option value=" " selected>---Select 2--------------</option>
<option value=" " selected>---Select 2--------------</option>
</select>
<select name="order32" onChange="ReDirect32(this.options.selectedIndex)">
<option value=" " selected> </option>
<option value=" " selected>---Select 3--------------</option>
<option value=" " selected>---Select 3--------------</option>
</select>
<select name="order42" onChange="ReDirect02(this.options.selectedIndex)">
<option value=" " selected> </option>
<option value=" " selected>---Select 4--------------</option>
<option value=" " selected>---Select 4--------------</option>
</select>
<BR>
<BR>

<BR>
<BR>
<BR>

<script>
<!--


/* */

var temp=document.order.order2
var temp1=document.order.order3
var temp2=document.order.order4
var CB2=document.order.order1.options.length
var CB3=document.order.order2.options.length
var CB4=document.order.order3.options.length
var ComboBox2=new Array(CB2)
var ComboBox3=new Array(CB2)
var ComboBox4=new Array(CB2)
var temp01=document.order.order21
var temp11=document.order.order31
var temp21=document.order.order41
var CB21=document.order.order11.options.length
var CB31=document.order.order21.options.length
var CB41=document.order.order31.options.length
var ComboBox2=new Array(CB21)
var ComboBox3=new Array(CB21)
var ComboBox4=new Array(CB21)
var temp02=document.order.order22
var temp12=document.order.order32
var temp22=document.order.order42
var CB22=document.order.order12.options.length
var CB32=document.order.order22.options.length
var CB42=document.order.order32.options.length
var ComboBox2=new Array(CB22)
var ComboBox3=new Array(CB22)
var ComboBox4=new Array(CB22)

var maximum="50"
var max=eval(maximum-1)
/* */

for (a=0; a<=max; a++){
ComboBox2[a]=new Array()
}
for (b=0; b<=max; b++){
ComboBox3[b]=new Array()
for (c=0; c<=max; c++){
ComboBox3[b][c]=new Array()
}}
for (d=0; d<=max; d++){
ComboBox4[d]=new Array()
for (e=0; e<=max; e++){
ComboBox4[d][e]=new Array()
for (f=0;f<=max; f++){
ComboBox4[d][e][f]=new Array()
}}}

/* */

for (a1=0; a1<=max; a1++){
ComboBox2[a1]=new Array()
}
for (b1=0; b1<=max; b1++){
ComboBox3[b1]=new Array()
for (c1=0; c1<=max; c1++){
ComboBox3[b1][c1]=new Array()
}}
for (d1=0; d1<=max; d1++){
ComboBox4[d1]=new Array()
for (e1=0; e1<=max; e1++){
ComboBox4[d1][e1]=new Array()
for (f1=0;f1<=max; f1++){
ComboBox4[d1][e1][f1]=new Array()
}}}

/* */

for (a2=0; a2<=max; a2++){
ComboBox2[a2]=new Array()
}
for (b2=0; b2<=max; b2++){
ComboBox3[b2]=new Array()
for (c2=0; c2<=max; c2++){
ComboBox3[b2][c2]=new Array()
}}
for (d2=0; d2<=max; d2++){
ComboBox4[d2]=new Array()
for (e2=0; e2<=max; e2++){
ComboBox4[d2][e2]=new Array()
for (f2=0;f2<=max; f2++){
ComboBox4[d2][e2][f2]=new Array()
}}}




FILL IN WITH YOUR COMBO BOX CODE HERE

/* */
function ReDirect1(x){
for (m=temp.options.length-1;m>0;m--)
temp.options[m]=null
for (i=0;i<ComboBox2[x].length;i++){
temp.options[i]=new Option(ComboBox2[x][i].text,ComboBox2[x][i].value)
}
temp.options[0].selected=true
ReDirect2(0)
}
function ReDirect2(y){
var x=document.order.order1.options.selectedIndex
for (m=temp1.options.length-1;m>0;m--)
temp1.options[m]=null
for (i=0;i<ComboBox3[x][y].length;i++){
temp1.options[i]=new Option(ComboBox3[x][y][i].text,ComboBox3[x][y][i].value)
}
temp1.options[0].selected=true
ReDirect3(0)
}
function ReDirect3(z){
var x=document.order.order1.options.selectedIndex
var y=document.order.order2.options.selectedIndex
for (m=temp2.options.length-1;m>0;m--)
temp2.options[m]=null
for (i=0;i<ComboBox4[x][y][z].length;i++){
temp2.options[i]=new Option(ComboBox4[x][y][z][i].text,ComboBox4[x][y][z][i].value)
}
temp2.options[0].selected=true
}
function ReDirect4(z){
window.location=temp2[z].value
}


/* */
function ReDirect11(x1){
for (m1=temp01.options.length-1;m1>0;m1--)
temp01.options[m1]=null
for (i1=0;i1<ComboBox2[x1].length;i1++){
temp01.options[i1]=new Option(ComboBox2[x1][i1].text,ComboBox2[x1][i1].value)
}
temp01.options[0].selected=true
ReDirect21(0)
}
function ReDirect21(y1){
var x1=document.order.order11.options.selectedIndex
for (m1=temp11.options.length-1;m1>0;m1--)
temp11.options[m1]=null
for (i1=0;i1<ComboBox3[x1][y1].length;i1++){
temp11.options[i1]=new Option(ComboBox3[x1][y1][i1].text,ComboBox3[x1][y1][i1].value)
}
temp11.options[0].selected=true
ReDirect31(0)
}
function ReDirect31(z1){
var x1=document.order.order11.options.selectedIndex
var y1=document.order.order21.options.selectedIndex
for (m1=temp21.options.length-1;m1>0;m1--)
temp21.options[m1]=null
for (i1=0;i1<ComboBox4[x1][y1][z1].length;i1++){
temp21.options[i1]=new Option(ComboBox4[x1][y1][z1][i1].text,ComboBox4[x1][y1][z1][i1].value)
}
temp21.options[0].selected=true
}
function ReDirect41(z1){
window.location=temp21[z1].value
}


/* */
function ReDirect12(x2){
for (m2=temp02.options.length-1;m2>0;m2--)
temp02.options[m2]=null
for (i2=0;i2<ComboBox2[x2].length;i2++){
temp02.options[i2]=new Option(ComboBox2[x2][i2].text,ComboBox2[x2][i2].value)
}
temp02.options[0].selected=true
ReDirect22(0)
}
function ReDirect22(y2){
var x2=document.order.order12.options.selectedIndex
for (m2=temp12.options.length-1;m2>0;m2--)
temp12.options[m2]=null
for (i2=0;i2<ComboBox3[x2][y2].length;i2++){
temp12.options[i2]=new Option(ComboBox3[x2][y2][i2].text,ComboBox3[x2][y2][i2].value)
}
temp12.options[0].selected=true
ReDirect32(0)
}
function ReDirect32(z2){
var x2=document.order.order12.options.selectedIndex
var y2=document.order.order22.options.selectedIndex
for (m2=temp22.options.length-1;m2>0;m2--)
temp22.options[m2]=null
for (i2=0;i2<ComboBox4[x2][y2][z2].length;i2++){
temp22.options[i2]=new Option(ComboBox4[x2][y2][z2][i2].text,ComboBox4[x2][y2][z2][i2].value)
}
temp22.options[0].selected=true
}
function ReDirect42(z2){
window.location=temp22[z2].value
}

//-->
</script>

gazzer
11-07-2002, 08:53 AM
How would you get the values of the 2nd, 3rd and 4th boxes and pass them to another page.

gazzer

howardshine
12-18-2002, 03:42 PM
I really like this drop down combo, but i've noticed when you click
2 then 2.1 then 2.1.2 or 1 then 1.2 then 1.2.1 or 1 then 1.1 then 1.1.2
You get this error.."Runtime error has occured" "Line 140, Error 'ComboBox4[...][...][...][...].text' is not an object"
Any suggestions?

acrokos
12-20-2002, 03:18 AM
Howard,

I m not sure why you are getting this error...did you copy the source code as posted previously, cause that was a working model that I use for my programming and its bug-free.

Alex

acrokos
12-20-2002, 03:22 AM
gazzer,


sorry for the delay...under pressure for many project deadlines by year end...I'll see what I can do, otherwise if you found a solution please share it with me (us).

Alex

acrokos
12-24-2002, 04:16 PM
I rechecked the souce code that i had posted a while ago...and there was a bug! Here is the new code bug-free!....

<html>
<head>
<title>ComboBox[4]</title>
</head>
<body>

<FORM name="CBN">
<table border="0" cellspacing="0" cellpadding="0" style="font-family: Lucida Console,Verdana, Tahoma, Arial; font-size: 9">
<tr align="center">
<td nowrap height="11"> &nbsp;
<select name="CBN1" size="1" style="font-family: Lucida Console,Verdana, Tahoma, Arial; font-size: 9"
onChange="ReDirect1(this.options.selectedIndex)">
<option selected>---Select1-------------</option>
<option>1</option>
<option>2</option>
</select>
<select name="CBN2" size="1" style="font-family: Lucida Console,Verdana, Tahoma, Arial; font-size: 9"
onChange="ReDirect2(this.options.selectedIndex)">
<option value=" " selected> </option>
<option value=" " selected>---Select2--------------</option>
<option value=" " selected>---Select2--------------</option>
</select>
<select name="CBN3" size="1" style="font-family: Lucida Console,Verdana, Tahoma, Arial; font-size: 9"
onChange="ReDirect3(this.options.selectedIndex)">
<option value=" " selected> </option>
<option value=" " selected>---Select3----------------</option>
<option value=" " selected>---Select3----------------</option>
</select>
<select name="CBN4" size="1" style="font-family: Lucida Console,Verdana, Tahoma, Arial; font-size: 9"
onChange="ReDirect(this.options.selectedIndex)">
<option value=" " selected> </option>
<option value=" " selected>---Select4----------------</option>
<option value=" " selected>---Select4----------------</option>
</select>
<script>
<!--

/* */
var temp=document.CBN.CBN2
var temp1=document.CBN.CBN3
var temp2=document.CBN.CBN4
var CB2=document.CBN.CBN1.options.length
var CB3=document.CBN.CBN2.options.length
var CB4=document.CBN.CBN3.options.length
var ComboBox2=new Array(CB2)
var ComboBox3=new Array(CB2)
var ComboBox4=new Array(CB2)

var maximum="12"
var max=eval(maximum-1)
/* */

for (a=0; a<=max; a++){
ComboBox2[a]=new Array()
}
for (b=0; b<=max; b++){
ComboBox3[b]=new Array()
for (c=0; c<=max; c++){
ComboBox3[b][c]=new Array()
}}
for (d=0; d<=max; d++){
ComboBox4[d]=new Array()
for (e=0; e<=max; e++){
ComboBox4[d][e]=new Array()
for (f=0;f<=max; f++){
ComboBox4[d][e][f]=new Array()
}}}

ComboBox2[0][0]=new Option("---Select2---"," ");
ComboBox2[1][0]=new Option("Now Select This One"," ");
ComboBox2[1][1]=new Option("1.1","");
ComboBox2[1][2]=new Option("1.2","");
ComboBox2[2][0]=new Option("Now Select This One"," ");
ComboBox2[2][1]=new Option("2.1","");
ComboBox2[2][2]=new Option("2.2","");
ComboBox3[0][0][0]=new Option("---Select 3---"," ");
ComboBox3[1][0][0]=new Option("---Select 3---"," ");
ComboBox3[1][1][0]=new Option("Now Select This One"," ");
ComboBox3[1][1][1]=new Option("1.1.1","");
ComboBox3[1][1][2]=new Option("1.1.2","");
ComboBox3[1][2][0]=new Option("Now Select This One"," ");
ComboBox3[1][2][1]=new Option("1.2.1","");
ComboBox3[1][2][2]=new Option("1.2.2","");
ComboBox3[2][0][0]=new Option("---Select 3---"," ");
ComboBox3[2][1][0]=new Option("Now Select This One"," ");
ComboBox3[2][1][1]=new Option("2.1.1","");
ComboBox3[2][1][2]=new Option("2.1.2","");
ComboBox3[2][2][0]=new Option("Now Select This One"," ");
ComboBox3[2][2][1]=new Option("2.2.1","");
ComboBox3[2][2][2]=new Option("2.2.2","");
ComboBox4[0][0][0][0]=new Option("---Select 4---"," ");
ComboBox4[1][0][0][0]=new Option("---Select 4---"," ");
ComboBox4[1][1][1][0]=new Option("Now Select A Page"," ");
ComboBox4[1][1][1][1]=new Option("1.1.1.1","http://www..com");
ComboBox4[1][1][1][2]=new Option("1.1.1.2","http://www..com");
ComboBox4[1][1][2][0]=new Option("Now Select A Page"," ");
ComboBox4[1][1][2][1]=new Option("1.1.2.1","http://www..com");
ComboBox4[1][1][2][2]=new Option("1.1.2.2","http://www..com");
ComboBox4[1][2][1][0]=new Option("Now Select A Page"," ");
ComboBox4[1][2][1][1]=new Option("1.2.1.1","http://www..com");
ComboBox4[1][2][1][2]=new Option("1.2.1.2","http://www..com");
ComboBox4[1][2][2][0]=new Option("Now Select A Page"," ");
ComboBox4[1][2][2][1]=new Option("1.2.2.1","http://www..com");
ComboBox4[1][2][2][2]=new Option("1.2.2.2","http://www..com");
ComboBox4[2][0][0][0]=new Option("---Select 4---"," ");
ComboBox4[2][1][1][0]=new Option("Now Select A Page"," ");
ComboBox4[2][1][1][1]=new Option("2.1.1.1","http://www..com");
ComboBox4[2][1][1][2]=new Option("2.1.1.2","http://www..com");
ComboBox4[2][1][2][0]=new Option("Now Select A Page"," ");
ComboBox4[2][1][2][1]=new Option("2.1.2.1","http://www..com");
ComboBox4[2][1][2][2]=new Option("2.1.2.2","http://www..com");
ComboBox4[2][2][1][0]=new Option("Now Select A Page"," ");
ComboBox4[2][2][1][1]=new Option("2.2.1.1","http://www..com");
ComboBox4[2][2][1][2]=new Option("2.2.1.2","http://www..com");
ComboBox4[2][2][2][0]=new Option("Now Select A Page"," ");
ComboBox4[2][2][2][1]=new Option("2.2.2.1","http://www..com");
ComboBox4[2][2][2][2]=new Option("2.2.2.2","http://www..com");


/* */
function ReDirect1(x){
for (m=temp.options.length-1;m>0;m--)
temp.options[m]=null
for (i=0;i<ComboBox2[x].length;i++){
temp.options[i]=new Option(ComboBox2[x][i].text,ComboBox2[x][i].value)
}
temp.options[0].selected=true
ReDirect2(0)
}
function ReDirect2(y){
var x=document.CBN.CBN1.options.selectedIndex
for (m=temp1.options.length-1;m>0;m--)
temp1.options[m]=null
for (i=0;i<ComboBox3[x][y].length;i++){
temp1.options[i]=new Option(ComboBox3[x][y][i].text,ComboBox3[x][y][i].value)
}
temp1.options[0].selected=true
ReDirect3(0)
}
function ReDirect3(z){
var x=document.CBN.CBN1.options.selectedIndex
var y=document.CBN.CBN2.options.selectedIndex
for (m=temp2.options.length-1;m>0;m--)
temp2.options[m]=null
for (i=0;i<ComboBox4[x][y][z].length;i++){
temp2.options[i]=new Option(ComboBox4[x][y][z][i].text,ComboBox4[x][y][z][i].value)
}
temp2.options[0].selected=true
}
function ReDirect(z){
window.location=temp2[z].value
}
//-->
</script>

</td>
</tr>
</table>
</FORM>

<p>
<br>
<font face="arial" size="-2">Thanks to Hamid Cheheltani and Jason Karl Davis of &nbsp; <a href="http://wsabstract.com">Website Abstraction</a> &nbsp; for providing this free script
</font>
</p>

</body>
</html>

mr_evans2u
02-19-2003, 11:17 PM
I copied the comboBox(Quadroule) code from this thread, but unlike others I am having some issues.
I am getting a Software error:
Can't coerce array into hash at (eval 29) line 23.

I have the html section on one page, that calls load.js. This is where I put the script.

Any suggestions on how I can fix this.

acrokos
02-21-2003, 06:43 PM
mr_evans2u,

Just copy the latest and updated code per this thread. Also, you can't put the script in a .js file it has to be in the original html page that you want to call this script. Use my sample as a reference to structure your html page properly.

Hope this helps.

Alex

mr_evans2u
02-21-2003, 07:12 PM
acrokos,

thanks for the reply, I was hoping to put this into my cgi page, but I'm having trouble changing the html format to fit our format. It works great in the html page and would love to get it to work for my project. I will continue to play with it.
I need to change this:
<option value=" " selected> </option>
<option value=" " selected>---Select---</option>
<option value=" " selected>---Select---</option>
</select>

Into this:
-type=>"text",
-values=>[" ",
" ",
" "],
-default=>["",
"---Select---",
"---Select---"],
-onChange=>"ReDirect2(this.options.selectedIndex)",

I don't like this format, but this is what I'm stuck with.

acrokos
02-22-2003, 12:20 AM
mr_evans2u,

Sorry but CGI is out of my realm...I wish I had the answer for you.

Regrets,

Alex

mr_evans2u
02-27-2003, 12:07 AM
I got it figured out, and running. It doesn't go to a link but puts a value into a .txt file. Had to do a few little things to get it to work the way I needed it to work.

very cool script :thumbsup:

Thank you

mr_evans2u
09-05-2003, 04:57 PM
I have added the combobox to my project, I noticed that after all four of the dropdowns have been selected and you go back to the third box and click on "now this one" the fourth box should go to ---Select----, instead it goes to "now this one". Not a big issue but would like to find out why it doesn't go back to --select-- like it does on the other two dropdowns.

dframeli
03-02-2009, 06:15 PM
jkd,

This link shown below is broken.

Do you have a new web link?

http://www.geocities.com/jason_yd/4combo.html (http://www.geocities.com/jason_yd/4combo.html)

Thanks,
Dale

jkd
03-02-2009, 10:13 PM
Okay, my personal website seems to be down, but here is something I whipped together just now:


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Polycombo</title>
<script type="text/javascript">


// Polycombo script
// By Jason Davis, www.jasonkarldavis.com
// Use this script freely as long as these credits are left intact.
var polycombo = (function() {
function clear(combo) {
while (combo.options.length != 0)
combo.remove(0);
}

function polycombo(obj, selects, enable, disable) {

// iterate through each combo box
for (var depth = 0; depth < selects.length-1; depth++) {

// clear any existing options
clear(selects[depth]);

// wire up on onchange listener
selects[depth].onchange = (function(depth) {
return function() {

// get the current branch
var current = obj;
for (var i = 0; i <= depth; i++) {
current = current[selects[i].options[selects[i].selectedIndex].text];
}

// are we at the end of the line?
if (typeof current == "string") {

// if variable depth, disable subsequent combos
if (depth < selects.length-1) {
for (i = depth+1; i < selects.length; i++) {
clear(selects[i]);
disable(selects[i]);
}
}

else {
// do nothing
}
}

// if not, fill in next combo and fire its onchange to cascade the changes
else {
clear(selects[depth+1]);
enable(selects[depth+1]);
for (var option in current) {
if (typeof current[option] == "string")
selects[depth+1].add(new Option(option, current[option]), null);
else
selects[depth+1].add(new Option(option, option), null);
}
selects[depth+1].selectedIndex = 0;

if ("onchange" in selects[depth+1])
selects[depth+1].onchange();

}
};
})(depth);
}

// kickstart the process
for (var option in obj)
selects[0].add(new Option(option, option), null);
selects[0].selectedIndex = 0;
selects[0].onchange();
}

return polycombo;
})();
</script>
<script type="text/javascript">
// example configuration
window.onload = function() {
// create the object that represents the nesting structure
// The name of the property is displayed in the combos, the value of the property is either
// carried over recursively to the next combo, or if a string, used as its value.
var combobox = {
"A": {
"A.1": {
"A.1.a": {
"A.1.a.i": "http://www.google.com",
"A.1.a.ii": "http://www.yahoo.com",
"A.1.a.iii": "http://www.microsoft.com"
},
"A.1.b": {
"A.1.b.i": "http://www.google.com",
"A.1.b.ii": "http://www.yahoo.com",
"A.1.b.iii": "http://www.microsoft.com"
}
},
"A.2": "hello"
},
"B": "testing"
};




// call the method to bind the object to the combos
polycombo(
combobox, // the object

document.getElementsByTagName("select"), // the selects (as an array or htmlcollection)

function(c) { // code to enable a disabled select (only ever called if polycombo is jagged)
c.disabled = false;
// c.style.visibility = "";
},

function(c) { // code to disable a select (for jagged polycombos)
c.disabled = true;
// c.style.visibility = "hidden";
}
);
}




// to demo the submission
function check(form) {
alert([form.elements[0].value, form.elements[1].value, form.elements[2].value, form.elements[3].value]);
return false;
}

</script>



</head>
<body>
<form action="javascript://" onsubmit="check(this); return false;">
<select>
<option>a</option>
<option>b</option>
<option>c</option>
<option>d</option>
</select>

<select>
<option>a</option>
<option>b</option>
<option>c</option>
<option>d</option>
</select>

<select>
<option>a</option>
<option>b</option>
<option>c</option>
<option>d</option>
</select>

<select>
<option>a</option>
<option>b</option>
<option>c</option>
<option>d</option>
</select>

<input type="submit" value="Submit!"/>
</form>
</body>
</html>


The code should be self-documented. It can handle as many combos as you want (there is no practical limitation), and it can also handle jagged combos (not all branches need to be equally deep).


I tested it in Firefox and Safari, though I can't imagine why it wouldn't work in IE (or Opera for that matter). If it doesn't, let me know and I'll figure it out.

dframeli
03-03-2009, 12:29 PM
jkd,

Thanks for posting this code :)

BTW, I copied the code and then examined it in my browser.

In my browser (IE7), only the 4th combo box contains any text. Combo boxes 1, 2 and 3 contain nothing, not even when I make a selection in combo box #4.

Also, at the bottom of my browser, there is an error message:

Line: 72
Char: 4
Error: Type Mismatch
Code: 0

Finally, 2 last questions :)

1) I'd rather include just a single Quad combo on my page, rather than a triple combo and a quad combo. Will this algorithm allow visitors to my site to make just 3 selections (in some limited cases) and then open a new page?

2) I don't have space on my 1024x768 page for a quad combo and a "Submit" button :). How can the code be modified such that after the 3rd, or 4th selection, the desired link automatically opens?

Thanks,
Dale

jkd
03-05-2009, 01:16 AM
Try this:


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Polycombo</title>
<script type="text/javascript">


// polycombo, by Jason Davis, www.jasonkarldavis.com ((C) 2009)
// Anyone may use this script freely as long as these credits remain intact.
function polycombo(data, selects, go, enable, disable) {

// iterate through each combo box
for (var depth = 0; depth < selects.length-1; depth++) {

// clear any existing options
selects[depth].options.length = 0;

// wire up on onchange listener
selects[depth].onchange = (function(depth) {
return function() {
// next combo
var nSelect = selects[depth+1];

// get the current branch
var current = data;
for (var i = 0; i <= depth; i++) {
current = current[selects[i].options[selects[i].selectedIndex].text];
}

// if object, update next combo
if (typeof current == "object") {
// remove next combo's existing options
nSelect.options.length = 0;
// enable it if jagged polycombo is in use
if (enable)
enable(nSelect);
// populate next combo
for (var option in current)
nSelect.options[nSelect.options.length] = new Option(option, current[option].toString());

// propagate changes
if (depth < selects.length-2)
nSelect.onchange();
}
// else if value
else {
// disable subsequent combos (if any)
for (i = depth+1; i < selects.length; i++) {
selects[i].options.length = 0;
disable(selects[i]);
}
// if auto-magic, go
if (go)
go(current);
}
};
})(depth);
}

// maybe bind event to last select
if (go)
selects[selects.length-1].onchange = function() {
go(this.options[this.selectedIndex].value);
};

// kickstart the process
for (var option in data)
selects[0].options[selects[0].options.length] = new Option(option, data[option].toString());
selects[0].onchange();

}
</script>
<script type="text/javascript">
// example configuration
window.onload = function() {
// create the object that represents the nesting structure
// The name of the property is displayed in the combos, the value of the property is either
// carried over recursively to the next combo, or if a string, used as its value.
var combobox = {
"A": {
"A.1": {
"A.1.a": {
"A.1.a.i": "http://www.google.com",
"A.1.a.ii": "http://www.yahoo.com",
"A.1.a.iii": "http://www.microsoft.com"
},
"A.1.b": {
"A.1.b.i": "http://www.google.com",
"A.1.b.ii": "http://www.yahoo.com",
"A.1.b.iii": "http://www.microsoft.com"
}
},
"A.2": "hello"
},
"B": "testing"
};




// call the method to bind the object to the combos
polycombo(
combobox, // the object

document.getElementsByTagName("select"), // the selects (as an array or htmlcollection)

function(val) { alert(val) }, // if present, the function to be called automatically on value-selection

function(c) { // code to enable a disabled select (only ever called if polycombo is jagged)
c.disabled = false;
// c.style.visibility = "";
},

function(c) { // code to disable a select (for jagged polycombos)
c.disabled = true;
// c.style.visibility = "hidden";
}
);
}




// to demo the submission
function check(form) {
alert([form.elements[0].value, form.elements[1].value, form.elements[2].value, form.elements[3].value]);
return false;
}

</script>



</head>
<body>
<form action="javascript://" onsubmit="check(this); return false;">
<select>
<option>a</option>
<option>b</option>
<option>c</option>
<option>d</option>
</select>

<select>
<option>a</option>
<option>b</option>
<option>c</option>
<option>d</option>
</select>

<select>
<option>a</option>
<option>b</option>
<option>c</option>
<option>d</option>
</select>

<select>
<option>a</option>
<option>b</option>
<option>c</option>
<option>d</option>
</select>

<input type="submit" value="Submit!"/>
</form>
</body>
</html>

dframeli
03-05-2009, 07:48 PM
Wonderful! That works!

One last question. More of a cosmetic thing than anything else.

I'd like to modify the code so that the 4th combo box was hidden from view unless needed (maybe the 3rd combo box also).

How can the poly combo be modified so that the 3rd and 4th combo boxes remain hidden until needed?

Thanks!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum