...

View Full Version : Cut & Paste Double Combo Script Question



ryalika
01-21-2006, 07:42 AM
Hello,

I just cut and pasted the Double Combo Script from javascriptkit.com and I am not fully understanding the directions provided. I am attempting to create a drop down for the "Make" of vehicles and also for the "Models" (that are associated for each Make) in order to direct my viewers to the appropriate installation diagram page for their specific vehicle.

I was able to enter the Make and Model information for only my first selection. After the first one, I am not understanding how to input the data for the remaining main category choices.

Below is a couple of snippets of the script for a better understanding...

The first part of the script is for the main categories and I was able to get them all to show in the combo box. I've listed just a brief snippet to illustrate the script....

<option>Acura</option>
<option>Alfa Romeo</option>
<option>American Motors</option>

The second step says I need to define (using HTML) the links associated with the First category and it looks like this....

<select name="stage2" size="1">
<option value="Diagram1.html">Integra</option>
<option value="Diagram2.html">Legend</option>
</select>

The third step is to fill in links. I've posted a bit below....

//group 1
group[0][0]=new Option("Integra","Diagram1.html")
group[0][1]=new Option("Legend","Diagram2.html")

group[1][0]=new Option("1750","Diagram3.html")
group[1][1]=new Option("Duetto","Diagram3.html")

...At this point everything is working fine for only the First Selection of "Acura".

I am not understanding how to input the data (and where to input it correctly) so that the second selection of "Alfa Romeo", when clicked, will show the correct group 1 model types. And so on with the third selection of American Motors when clicked will show its appropriate model types in the group 2 batch, etc. etc. etc.

I hope I've made some sense here and if anyone is able to help me out I would veryyy much appreciate it!

Thank you,

ryalika

vwphillips
01-21-2006, 11:08 AM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>
</head>

<body>
<select onchange="Populate(this,'stage2');">
<option>Select A Make</option>
<option>Acura</option>
<option>Alfa Romeo</option>
<option>American Motors</option>
</select><br>

The second step says I need to define (using HTML) the links associated with the First category and it looks like this....

<select name="stage2" id="stage2" size="1">
<option>Select A Model</option>
</select>

The third step is to fill in links. I've posted a bit below....
<script language="JavaScript" type="text/javascript">
<!--
// the array 'grroup is a dimensioned array holding the options for stage 2 for each option selection of stage 1
var group=[];
//field 0 is an array for options 1 (Acura) Models
group[0]=[];
group[0][0]=new Option("Integra","Diagram1.html")
group[0][1]=new Option("Legend","Diagram2.html")

//field 1 is an array for options 2 (Alpha) Models
group[1]=[];
group[1][0]=new Option("1750","Diagram3.html")
group[1][1]=new Option("Duetto","Diagram4.html")

//field 2 is an array for options 3 (AMotors) Models
group[2]=[];
group[2][0]=new Option("car X","Diagram5.html")
group[2][1]=new Option("car Y","Diagram6.html")

function Populate(obj,id){
var index=obj.selectedIndex;// the selected index of stage 1
if (index<1){ return; } // return if the first(title) option
var target=document.getElementById(id); // the stage 2 opject
target.options.length=1; // set the number of options to 1( the title
var ary=group[index-1]; // for convenience record the array in field (index-1) of array group in a local var ary
for (var zxc0=0;zxc0<ary.length;zxc0++){
target.options[zxc0+1]=ary[zxc0]; // repopulate the stage 2 select
}
target.selectedIndex=0; // set the selected index to 0
}

//-->
</script></body>

</html>

however this is more correct


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>
</head>

<body>
<select onchange="Populate(this,'stage2');">
<option>Select A Make</option>
<option>Acura</option>
<option>Alfa Romeo</option>
<option>American Motors</option>
</select><br>

The second step says I need to define (using HTML) the links associated with the First category and it looks like this....

<select name="stage2" id="stage2" size="1">
<option>Select A Model</option>
</select>

The third step is to fill in links. I've posted a bit below....
<script language="JavaScript" type="text/javascript">
<!--
// the array 'grroup is a dimensioned array holding the options for stage 2 for each option selection of stage 1
var group=[];
//field 0 is an array for options 1 (Acura) Models
group[0]=[];
group[0][0]=["Integra","Diagram1.html"];
group[0][1]=["Legend","Diagram2.html"];

//field 1 is an array for options 2 (Alpha) Models
group[1]=[];
group[1][0]=["1750","Diagram3.html"];
group[1][1]=["Duetto","Diagram4.html"];

//field 2 is an array for options 3 (AMotors) Models
group[2]=[];
group[2][0]=["car X","Diagram5.html"];
group[2][1]=["car Y","Diagram6.html"];

function Populate(obj,id){
var index=obj.selectedIndex;// the selected index of stage 1
if (index<1){ return; } // return if the first(title) option
var target=document.getElementById(id); // the stage 2 opject
target.options.length=1; // set the number of options to 1( the title
var ary=group[index-1]; // for convenience record the array in field (index-1) of array group in a local var ary
for (var zxc0=0;zxc0<ary.length;zxc0++){
target.options[zxc0+1]=new Option(ary[zxc0][0],ary[zxc0][1],true,true); // repopulate the stage 2 select
}
target.selectedIndex=0; // set the selected index to 0
}

//-->
</script></body>

</html>

better still see

http://www.vicsjavascripts.org.uk/FormCompendium/FormCompendium.htm#f14

ryalika
01-22-2006, 03:32 AM
Thank you so much for your help, VWPhillips! You are an absolute lifesaver! The boxes are exactly what I needed and you made it easy to understand too.

My only other question is my "Go" button is missing now. I need the links to work after they select the model type. I am using Fusion 7.5, if I use the Form Handler tool to create another Go button will it work with the links in the script or do I need to add another part to the script to make another button?

Ryalika

ryalika
01-22-2006, 05:14 AM
I used the 2nd code you posted and I found my "Go Button" but when I click it ...nothing happens other than an error.

<select name="stage2" id="stage2" size="1">
<option>Select A Model</option>
</select>
<input type="button" name="test" value="Go!"
onClick="go()">
</p>

I know it probably needs a different code for it but I don't know enough about js to do it. I need it to take the viewers to the diagram links after selecting their model type.

ryalika
01-22-2006, 08:13 AM
I'm totally at a loss and need help...I'm so frustrated now I just want to cry...
Here is my script...I need to know what I'm doing wrong. I've bolded and colored my questions Red... at least I think these are my questions...I'm so confused right now my head is spinning...


<select onchange="Populate(this,'stage2');">
<option>Select A Make</option>
<option>Acura</option>
<option>Alfa Romeo</option>
<option>American Motors</option>
<option>Audi</option>
<option>Austin-Healey</option>
<option>BMW</option>
</select><br>

<select name="stage2" id="stage2" size="1">
<option>Select A Model</option>
</select> Do I add the models for the Acura here with links, or do I add ALL the models and links in this section? Do I need to make multiple copies of this for each grouping?

<input type="button" name="test" value="Go!" onClick="go()">
</script>Is this where my Go button should be and is the code correct?

</p>

<script language="JavaScript" type="text/javascript">
<!--
// the array 'group is a dimensioned array holding the options for stage 2 for each option selection of stage 1
var group=[];
//field 0 is an array for options 1 (Acura) Models
group[0]=[];
group[0][0]=["CL","Diagram1.html"]
group[0][1]=["EL","Diagram1.html"]
group[0][2]=["Integra","Diagram1.html"]
group[0][3]=["Legend","Diagram1.html"]
group[0][4]=["MDX","Diagram1.html"]
group[0][5]=["NSX","Diagram1.html"]
group[0][6]=["RL","Diagram1.html"]
group[0][7]=["RSX","Diagram1.html"]
group[0][8]=["SLX","Diagram1.html"]
group[0][9]=["TL","Diagram1.html"]
group[0][10]=["Vigor","Diagram1.html"]


//field 1 is an array for options 2 (Alpha) Models
group[1]=[];
group[1][0]=["1750","Diagram3.html"];
group[1][1]=["Duetto","Diagram4.html"];

//field 2 is an array for options 3 (AMotors) Models
group[2]=[];
group[2][0]=["car X","Diagram5.html"];
group[2][1]=["car Y","Diagram6.html"];


function Populate(obj,id){
var index=obj.selectedIndex;// the selected index of stage 1
if (index<1){ return; } // return if the first(title) option
var target=document.getElementById(id); // the stage 2 object
target.options.length=1; // set the number of options to 1( the title
var ary=group[index-1]; // for convenience record the array in field (index-1) of array group in a local var ary
for (var zxc0=0;zxc0<ary.length;zxc0++){
target.options[zxc0+1]=new Option(ary[zxc0][0],ary[zxc0][1],true,true); // repopulate the stage 2 select
}
target.selectedIndex=0; // set the selected index to 0
}


//-->
</script>

vwphillips
01-22-2006, 09:38 AM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>
</head>

<body>

</body>



<select onchange="Populate(this,'stage2');">
<option>Select A Make</option>
<option>Acura</option>
<option>Alfa Romeo</option>
<option>American Motors</option>
<option>Audi</option>
<option>Austin-Healey</option>
<option>BMW</option>
</select><br>

<select name="stage2" id="stage2" size="1" onchange="go();">
<option>Select A Model</option>
</select>

Do I add the models for the Acura here with links,<br>
or do I add ALL the models and links in this section?<br>
Do I need to make multiple copies of this for each grouping?<br>
<br>
The models are added to stage2 when to select a make
<br>
<input type="button" name="test" value="Go!" onClick="go()">
<br>
Is this where my Go button should be and is the code correct?<br>
<br>
you need thr function and could use<br>
&lt;select name="stage2" id="stage2" size="1" onchange="go();">
</p>

<script language="JavaScript" type="text/javascript">
<!--

function go(){
var stg2=document.getElementById('stage2');
if (stg2.selectedIndex<1){ return; }
window.top.location=stg2.options[stg2.selectedIndex].value
}

// the array 'group is a dimensioned array holding the options for stage 2 for each option selection of stage 1
var group=[];
//field 0 is an array for options 1 (Acura) Models
group[0]=[];
group[0][0]=["CL","Diagram1.html"]
group[0][1]=["EL","Diagram1.html"]
group[0][2]=["Integra","Diagram1.html"]
group[0][3]=["Legend","Diagram1.html"]
group[0][4]=["MDX","Diagram1.html"]
group[0][5]=["NSX","Diagram1.html"]
group[0][6]=["RL","Diagram1.html"]
group[0][7]=["RSX","Diagram1.html"]
group[0][8]=["SLX","Diagram1.html"]
group[0][9]=["TL","Diagram1.html"]
group[0][10]=["Vigor","Diagram1.html"]


//field 1 is an array for options 2 (Alpha) Models
group[1]=[];
group[1][0]=["1750","Diagram3.html"];
group[1][1]=["Duetto","Diagram4.html"];

//field 2 is an array for options 3 (AMotors) Models
group[2]=[];
group[2][0]=["car X","Diagram5.html"];
group[2][1]=["car Y","Diagram6.html"];


function Populate(obj,id){
var index=obj.selectedIndex;// the selected index of stage 1
if (index<1){ return; } // return if the first(title) option
var target=document.getElementById(id); // the stage 2 object
target.options.length=1; // set the number of options to 1( the title
var ary=group[index-1]; // for convenience record the array in field (index-1) of array group in a local var ary
for (var zxc0=0;zxc0<ary.length;zxc0++){
target.options[zxc0+1]=new Option(ary[zxc0][0],ary[zxc0][1],true,true); // repopulate the stage 2 select
}
target.selectedIndex=0; // set the selected index to 0
}


//-->
</script>

ryalika
01-22-2006, 10:16 AM
VWPhillips,

Thank you bunches! It's working perfectly now! You are wonderful~ I didn't know what I was a going to do and the more I fiddled with it, the more frustrated I got.

Much Much Appreciated~

ryalika



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum