PDA

View Full Version : ComboBox (quadruple with images)

iecwebmast
03-18-2003, 03:25 PM
I would like to combine the QuadComboBox script with a Combo Image Selector script... so that the 4th combo box will show the logos corresponding to the selection in the 3rd combo box.

Can anyone help me on this one?

Here are the two scripts:

1) QuadComboBox
*****************************************
<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">

<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 <a href="http://wsabstract.com">Website Abstraction</a> for providing this free script
</font>
</p>

</body>
</html>


*******************************
2) Combo Image Selector

<html>
<head>
<script language="javascript">
<!--

/*Combo Box Image Selector:
By JavaScript Kit (www.javascriptkit.com)
Over 200+ free JavaScript here!
*/

function linkrotate(which){
var mylinks=new Array()
//add in more links if you want (ie:mylinks[3]=...)
mylinks[0]="http://www.abcnews.com"
mylinks[1]="http://www.cnn.com"
mylinks[2]="http://www.geocities.com"

window.location=mylinks[which]
}


function showimage()
{
if (!document.images)
return
document.images.pictures.src=
document.mygallery.picture.options[document.mygallery.picture.selectedIndex].value
}
//-->
</script>
</head>

<body>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%"><form name="mygallery"><p><select
name="picture" size="1" onChange="showimage()">
<option selected value="me.gif">Picture of me</option>
<option value="myaunt.gif">Picture of my aunt</option>
<option value="brother.gif">Picture of my brother</option>
</select></p>
</form>
</td>
</tr>
<tr>
<td width="100%"><p align="center"><a href="javascript:linkrotate(document.mygallery.picture.selectedIndex)" onMouseover="window.status='';return true"><img src="me.gif" name="pictures" width="99"
height="100" border=0></a></td>
</tr>
</table>
</body>
</html>


**************
Cheers,

Laila