Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Jan 2006
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Cut & Paste Double Combo Script Question

    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

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,522
    Thanks
    3
    Thanked 508 Times in 495 Posts
    Code:
    <!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

    Code:
    <!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/Fo...endium.htm#f14
    Last edited by vwphillips; 01-21-2006 at 11:10 AM.

  • #3
    New to the CF scene
    Join Date
    Jan 2006
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    One more question about a Go button...

    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

  • #4
    New to the CF scene
    Join Date
    Jan 2006
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    oops by the way....

    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.

  • #5
    New to the CF scene
    Join Date
    Jan 2006
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Pasting my script, I'm so confused...

    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>

  • #6
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,522
    Thanks
    3
    Thanked 508 Times in 495 Posts
    Code:
    <!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>

  • #7
    New to the CF scene
    Join Date
    Jan 2006
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up Thank You Bunches!

    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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •