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 12 of 12
  1. #1
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts

    HELP!! Triple Combo

    Hi ' I'm trying to make that script working for hours and I havent being able to make the third box working... Please help me.

    Here's my code :
    Code:
    <textarea name="Probleme" cols="54" rows="4" id="Probleme"><FORM name="isc">
    <table border="0" cellspacing="0" cellpadding="0">
      <tr align="center"> 
        <td nowrap height="11"> &nbsp;
    
    <select name="example" size="1" onChange="redirect(this.options.selectedIndex)">
    <option selected>-Produit-</option>
    <option>Battant</option>
    <option>Coulissante</option>
    <option>Guillotine simple</option>
    <option>Auvent</option>
    <option>Imposte</option>
    <option>Porte d'entré</option>
    <option>Porte Patio</option>
    <option>Porte Jardin</option>
    <option>Porte de garage</option>
    </select>
    
    <select name="stage2" size="1" onChange="redirect1(this.options.selectedIndex)">
    <option value=>-Spécification 1-</option>
    </select>
    
    <select name="stage3" size="1" onChange="redirect2(this.options.selectedIndex)">
    <option value=>-Spécification 2-</option>
    </select>
    
    <script>
    <!--
    
    /*
    Triple Combo Script Credit
    By Hamid Cheheltani/ JavaScript Kit (http://www.javascriptkit.com)
    Visit http://javascriptkit.com for this and over 400+ other scripts
    */
    var groups=document.isc.example.options.length
    var group=new Array(groups)
    for (i=0; i<groups; i++)
    group[i]=new Array()
    
    group[0][0]=new Option("-Spécification 1-")
    
    group[1][0]=new Option("-Spécification 1-")
    group[1][1]=new Option("PVC")
    group[1][2]=new Option("Combo Aluminium")
    group[1][3]=new Option("Combo PVC")
    
    group[2][0]=new Option("-Spécification 1-")
    group[2][1]=new Option("PVC")
    group[2][2]=new Option("Bois")
    group[2][3]=new Option("Combo PVC")
    group[2][4]=new Option("Combo Aluminium")
    
    group[3][0]=new Option("-Spécification 1-")
    group[3][1]=new Option("PVC")
    group[3][2]=new Option("Combo Aluminium")
    group[3][3]=new Option("Combo PVC")
    
    group[4][0]=new Option("-Spécification 1-")
    
    group[5][0]=new Option("-Spécification 1-")
    
    group[6][0]=new Option("-Spécification 1-")
    group[6][1]=new Option("1 side")
    group[6][2]=new Option("2 side")
    
    group[7][0]=new Option("-Spécification 1-")
    group[7][1]=new Option("5 pouces")
    group[7][2]=new Option("6 pouces")
    group[7][3]=new Option("7 pouces")
    group[7][4]=new Option("8 pouces")
    group[7][5]=new Option("9 pouces")
    
    group[8][0]=new Option("-Spécification 1-")
    group[8][1]=new Option("5 pouces")
    group[8][2]=new Option("6 pouces")
    group[8][3]=new Option("7 pouces")
    group[8][4]=new Option("8 pouces")
    group[8][5]=new Option("9 pouces")
    
    group[9][0]=new Option("-Spécification 1-")
    group[9][1]=new Option("Torsion")
    group[9][2]=new Option("Extension")
    
    var temp=document.isc.stage2
    
    
    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)
    }
    
    
    
    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("-Spécification 2-")
    
    secondGroup[1][0][0]=new Option("-Spécification 2-")
    
    secondGroup[2][0][0]=new Option("-Spécification 2-")
    
    secondGroup[3][0][0]=new Option("-Spécification 2-")
    
    secondGroup[4][0][0]=new Option("-Spécification 2-")
    
    secondGroup[5][0][0]=new Option("-Spécification 2-")
    
    secondGroup[6][0][0]=new Option("-Spécification 2-")
    
    secondGroup[6][1][0]=new Option("-Spécification 2-")
    secondGroup[6][1][1]=new Option("Blanc")
    secondGroup[6][1][2]=new Option("Couleur")
    
    secondGroup[6][2][0]=new Option("-Spécification 2-")
    secondGroup[6][2][1]=new Option("Blanc")
    secondGroup[6][2][2]=new Option("Couleur")
    
    secondGroup[6][3][0]=new Option("-Spécification 2-")
    secondGroup[6][3][1]=new Option("Blanc")
    secondGroup[6][3][2]=new Option("Couleur")
    
    secondGroup[6][4][0]=new Option("-Spécification 2-")
    secondGroup[6][4][1]=new Option("Blanc")
    secondGroup[6][4][2]=new Option("Couleur")
    
    secondGroup[6][5][0]=new Option("-Spécification 2-")
    secondGroup[6][5][1]=new Option("Blanc")
    secondGroup[6][5][2]=new Option("Couleur")
    
    secondGroup[7][0][0]=new Option("-Spécification 2-")
    
    secondGroup[7][1][0]=new Option("-Spécification 2-")
    secondGroup[7][1][1]=new Option("Blanc")
    secondGroup[7][1][2]=new Option("Couleur")
    
    secondGroup[7][2][0]=new Option("-Spécification 2-")
    secondGroup[7][2][1]=new Option("Blanc")
    secondGroup[7][2][2]=new Option("Couleur")
    
    secondGroup[7][3][0]=new Option("-Spécification 2-")
    secondGroup[7][3][1]=new Option("Blanc")
    secondGroup[7][3][2]=new Option("Couleur")
    
    secondGroup[7][4][0]=new Option("-Spécification 2-")
    secondGroup[7][4][1]=new Option("Blanc")
    secondGroup[7][4][2]=new Option("Couleur")
    
    secondGroup[7][5][0]=new Option("-Spécification 2-")
    secondGroup[7][5][1]=new Option("Blanc")
    secondGroup[7][5][2]=new Option("Couleur")
    
    secondGroup[8][0][0]=new Option("-Spécification 2-")
    
    secondGroup[8][1][0]=new Option("-Spécification 2-")
    secondGroup[8][1][1]=new Option("Blanc")
    secondGroup[8][1][2]=new Option("Couleur")
    
    secondGroup[8][2][0]=new Option("-Spécification 2-")
    secondGroup[8][2][1]=new Option("Blanc")
    secondGroup[8][2][2]=new Option("Couleur")
    
    secondGroup[8][3][0]=new Option("-Spécification 2-")
    secondGroup[8][3][1]=new Option("Blanc")
    secondGroup[8][3][2]=new Option("Couleur")
    
    secondGroup[8][4][0]=new Option("-Spécification 2-")
    secondGroup[8][4][1]=new Option("Blanc")
    secondGroup[8][4][2]=new Option("Couleur")
    
    secondGroup[8][5][0]=new Option("-Spécification 2-")
    secondGroup[8][5][1]=new Option("Blanc")
    secondGroup[8][5][2]=new Option("Couleur")
    
    secondGroup[9][0][0]=new Option("-Spécification 2-")
    
    secondGroup[9][1][0]=new Option("-Spécification 2-")
    secondGroup[9][1][1]=new Option("Avec fenêtres")
    secondGroup[9][1][2]=new Option("Sans fenêtres")
    
    secondGroup[9][2][0]=new Option("-Spécification 2-")
    secondGroup[9][2][1]=new Option("Avec fenêtres")
    secondGroup[9][2][2]=new Option("Sans fenêtres")
    
    var temp1=document.isc.stage3
    function redirect1(y){
    for (m=temp1.options.length-1;m>0;m--)
    temp1.options[m]=null
    for (i=0;i<secondGroup[document.isc.example.options.selectedIndex][y].length;i++){
    temp1.options[i]=new Option(secondGroup[document.isc.example.options.selectedIndex][y][i].text,secondGroup[document.isc.example.options.selectedIndex][y][i].value)
    }
    temp1.options[0].selected=true
    }
    
    function redirect2(z){
    window.location=temp1[z].value
    }
    
    //-->
    </script>
    
    		</td>
      </tr>
    </table>
    </FORM></textarea>
    Last edited by ezrian; 12-09-2010 at 07:23 AM.

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,907
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    As far as I can see this script has a defect which prevents it working when a second stage option has a length greater than the first stage option.

    It is old and inefficient code anyway - I suggest you junk it and use:-

    Code:
    <html>
    <head>
    
    <script type="text/javascript">
    
    var categories = [];
    categories["startList"] = ["Apparel","Books"]
    categories["Apparel"] = ["Men","Women"];
    categories["Books"] = ["Biography","Fiction","Nonfiction"];
    categories["Men"] = ["Shirts","Ties","Belts","Hats"];
    categories["Women"] = ["Blouses","Skirts","Scarves"];
    categories["Biography"] = ["Contemporay","Historical","Other"];
    categories["Fiction"] = ["Science","Romance"];
    categories["Nonfiction"] = ["How-To","Travel","Cookbooks", "Old Churches"];
    
    var nLists = 3; // number of lists in the set
    
    function fillSelect(currCat,currList){
    var step = Number(currList.name.replace(/\D/g,""));
    for (i=step; i<nLists+1; i++) {
    document.forms[0]['List'+i].length = 1;
    document.forms[0]['List'+i].selectedIndex = 0;
    }
    var nCat = categories[currCat];
    for (each in nCat) {
    var nOption = document.createElement('option'); 
    var nData = document.createTextNode(nCat[each]); 
    nOption.setAttribute('value',nCat[each]); 
    nOption.appendChild(nData); 
    currList.appendChild(nOption); 
    } 
    }
    
    function getValue(L3, L2, L1) {
    alert("Your selection was:- \n" + L1 + "\n" + L2 + "\n" + L3);
    }
    
    function init() {
    fillSelect('startList',document.forms[0]['List1'])
    }
    
    navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', init, false) : addEventListener('load', init, false);	
    
    </script>
    </head>
    
    <body>
    <form action="">
    <select name='List1' onchange="fillSelect(this.value,this.form['List2'])">
    <option selected>Make a selection</option>
    </select>
    &nbsp;
    <select name='List2' onchange="fillSelect(this.value,this.form['List3'])">
    <option selected>Make a selection</option>
    </select>
    &nbsp;
    <select name='List3' onchange="getValue(this.value, this.form['List2'].value, this.form['List1'].value)">
    <option selected >Make a selection</option>
    </select>
    </form>
    
    </body>
    </html>
    “I don't pretend we have all the answers. But the questions are certainly worth thinking about..” - Arthur C. Clarke quotes (English Writer of science fiction, b.1917
    Last edited by Philip M; 12-09-2010 at 08:37 AM.

  • Users who have thanked Philip M for this post:

    ezrian (01-23-2011)

  • #3
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thank you for the help, it's working just fine!

  • #4
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,071
    Thanks
    38
    Thanked 498 Times in 492 Posts
    Pretty neat "Phillip M".

    Have one question, if you don't mind ...
    In the following portion of the 'fillSelect' function ...
    Code:
    function fillSelect(currCat,currList){
      var step = Number(currList.name.replace(/\D/g,""));
      for (i=step; i<nLists+1; i++) {
        document.forms[0]['List'+i].length = 1;
        document.forms[0]['List'+i].selectedIndex = 0;
      }
    How is the 'step' variable being formed?

    My assumption is that the number (1-3) is being removed from "List1"..."List3",
    but then that string is converted to a Number. Why does than not result in a NaN?

    Ahh: never mind. I just noticed that the check is with a \D, not a \d.
    So the "List" portion is removed from "List1"..."List3", leaving only a digit (1..3) which the Number function is operating on.

    OK, a different question:
    In the following ternary statement ...
    Code:
    navigator.appName == "Microsoft Internet Explorer" 
                       ? attachEvent('onload', init, false) 
                       : addEventListener('load', init, false);
    ... is the check for the .appName always going to work for all browsers? including mobile devices?

  • #5
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,907
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Quote Originally Posted by jmrker View Post
    In the following ternary statement ...
    Code:
    navigator.appName == "Microsoft Internet Explorer" 
                       ? attachEvent('onload', init, false) 
                       : addEventListener('load', init, false);
    ... is the check for the .appName always going to work for all browsers? including mobile devices?
    I am afraid that I do not have any experience of mobile devices, so I do not know the answer.

  • #6
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts
    I'm afraid I have a problem again, I want to have 2 "starlist" but the second take over the first. Thank you for you help.

    Here's the code :
    Code:
    <html>
    <head>
    <script type="text/javascript">
    
    var categories = [];
    categories["startList"] = ["Battant","Coulissante","Guillotine_simple","Auvent","Imposte","Porte_d'entrée","Porte_Patio","Porte_Jardin","Porte_de_garage"]
    categories["Battant"] = ["PVC","Combo Aluminium","Combo PVC"];
    categories["Coulissante"] = ["PVC","Bois","Combo Aluminium","Combo PVC"];
    categories["Guillotine_simple"] = ["PVC","Combo Aluminium","Combo PVC"];
    categories["Porte_d'entrée"] = ["1 side","2 side"];
    categories["Porte_Patio"] = ["5 pieds","6 pieds","7 pieds","8 pieds","9 pieds"];
    categories["Porte_Jardin"] = ["5 pieds","6 pieds","7 pieds","8 pieds","9 pieds"];
    var nLists = 3; // number of lists in the set
    
    function fillSelect(currCat,currList){
    var step = Number(currList.name.replace(/\D/g,""));
    for (i=step; i<nLists+1; i++) {
    document.forms[0]['List'+i].length = 1;
    document.forms[0]['List'+i].selectedIndex = 0;
    }
    var nCat = categories[currCat];
    for (each in nCat) {
    var nOption = document.createElement('option'); 
    var nData = document.createTextNode(nCat[each]); 
    nOption.setAttribute('value',nCat[each]); 
    nOption.appendChild(nData); 
    currList.appendChild(nOption); 
    } 
    }
    
    function getValue(L3, L2, L1) {
    }
    
    function init() {
    fillSelect('startList',document.forms[0]['List5'])
    }
    
    navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', init, false) : addEventListener('load', init, false);	
    
    </script>
    
    <script type="text/javascript">
    
    var categories = [];
    categories["startList"] = ["Torsion","Extension"]
    categories["Torsion"] = ["Avec Fenêtre","Sans Fenêtre"];
    categories["Extension"] = ["Avec Fenêtre","Sans Fenêtre"];
    categories["Avec Fenêtre"] = ["Avec Moteur","Sans Moteur"];
    categories["Sans Fenêtre"] = ["Avec Moteur","Sans Moteur"];
    var nLists = 3; // number of lists in the set
    
    function fillSelect(currCat,currList){
    var step = Number(currList.name.replace(/\D/g,""));
    for (i=step; i<nLists+1; i++) {
    document.forms[0]['List'+i].length = 1;
    document.forms[0]['List'+i].selectedIndex = 0;
    }
    var nCat = categories[currCat];
    for (each in nCat) {
    var nOption = document.createElement('option'); 
    var nData = document.createTextNode(nCat[each]); 
    nOption.setAttribute('value',nCat[each]); 
    nOption.appendChild(nData); 
    currList.appendChild(nOption); 
    } 
    }
    
    function getValue(L3, L2, L1) {
    }
    
    function init() {
    fillSelect('startList',document.forms[0]['pgarage5'])
    }
    
    navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', init, false) : addEventListener('load', init, false);	
    
    </script>
    </head>
    <body>
    <form action="">
      <p>
        <select name='List5' id="List5" onChange="fillSelect(this.value,this.form['List6'])">
          <option selected>Produit</option>
        </select>
        &nbsp;
        <select name='List6' id="List6">
          <option selected>Sp&eacute;cification</option>
        </select>
      </p>
      <p> 
        <select name='pgarage5' id="pgarage5" onchange="fillSelect(this.value,this.form['pgarage6'])">
          <option selected>Type</option>
            </select>
      &nbsp;
        <select name='pgarage6' id="pgarage6" onchange="fillSelect(this.value,this.form['pgarage7'])">
            <option selected>Fenêtre</option>
              </select>
      &nbsp;
        <select name='pgarage7' id="pgarage7" onchange="getValue(this.value, this.form['pgarage6'].value, this.form['pgarage5'].value)">
            <option selected >Moteur</option>
              </select>
        </p>
    </form>
    </body>
    </html>

  • #7
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,907
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    You are trying to run the same script twice on the same page. That cannot be done as it results in duplicate function and variable names, so the second script over-writes the first. You must rename all the functions and variables in the second script with a letter suffix to, e.g:-

    Code:
    var categoriesB = [];
    var nListsB = 3;
    You have also messed it up by renaming the select lists to pgarage5 etc. They must be named List1, List2 etc. (with numeric suffix 1,2,3 etc.) in each set of select boxes unless you alter the code elsewhere to suit. To avoid a clash you must make the second set of names ListB1, ListB2 etc. and then in the second script:-

    Code:
    function fillSelectB(currCatB, currListB){
    var stepB = Number(currListB.name.replace(/\D/g,""));  // capture the suffix digit
    for (iB = stepB; iB<nListsB+1; iB++) {
    document.forms[0]['ListB'+iB].length = 1;
    document.forms[0]['ListB'+iB].selectedIndex = 0;
    }
    You cannot have two functions named init(). You must rename one to initB() or preferably combine them into one.

    My advice would be to get the second startlist working independently with the renamed functions and variables, in other words without the first one, and only attempt to combine both together on your page after that.



    All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.
    Last edited by Philip M; 12-13-2010 at 09:11 AM.

  • #8
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts
    So I tried your idea of making the second list work independently first, but I can't get it to work, and I can't figure out why... Thank's again.

    Code:
    <html>
    <head>
    <script type="text/javascript">
    
    /*
    Triple Combo Script Credit
    By Philip M: http://www.codingforums.com/member.php?u=186
    Visit http://javascriptkit.com for this and over 400+ other scripts
    */
    
    var categoriesB = [];
    categoriesB["startListB"] = ["Wearing Apparel","Books"]
    categoriesB["Wearing Apparel"] = ["Men","Women","Children"];
    categoriesB["Books"] = ["Biography","Fiction","Nonfiction"];
    categoriesB["Men"] = ["Shirts","Ties","Belts","Hats"];
    categoriesB["Women"] = ["Blouses","Skirts","Scarves", "Hats"];
    categoriesB["Children"] = ["Shorts", "Socks", "Coats", "Nightwear"];
    categoriesB["Biography"] = ["Contemporay","Historical","Other"];
    categoriesB["Fiction"] = ["Science Fiction","Romance", "Thrillers", "Crime"];
    categoriesB["Nonfiction"] = ["How-To","Travel","Cookbooks", "Old Churches"];
    
    var nListsB = 3; // number of select lists in the set
    
    function fillSelectB(currCatB, currListB){
    var stepB = Number(currListB.name.replace(/\D/g,""));  // capture the suffix digit
    for (iB = stepB; iB<nListsB+1; iB++) {
    document.forms[0]['ListB'+iB].length = 1;
    document.forms[0]['ListB'+iB].selectedIndex = 0;
    }
    var nCatB = categoriesB[currCatB];
    for (each in nCatB) {
    var nOptionB = document.createElement('optionB'); 
    var nDataB = document.createTextNode(nCatB[each]); 
    nOptionB.setAttribute('valueB',nCatB[each]); 
    nOptionB.appendChild(nDataB); 
    currListB.appendChild(nOptionB); 
    } 
    }
    
    function getValueB(L3, L2, L1) {
    }
    
    function initB() {
    fillSelectB('startListB',document.forms['tripleplay']['ListB1'])
    }
    
    navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', init, false) : addEventListener('load', init, false);	
    
    </script> 
    </head>
    <body>
    <form name="tripleplay" action="">
    <select name='ListB1' onchange="fillSelect(this.value,this.form['ListB2'])">
    <option selected>Make a selection</option>
    </select>
    &nbsp;
    <select name='ListB2' onchange="fillSelect(this.value,this.form['ListB3'])">
    <option selected>Make a selection</option>
    </select>
    &nbsp;
    <select name='ListB3' onchange="getValue(this.value, this.form['ListB2'].value, 
    this.form['ListB1'].value)">
    <option selected >Make a selection</option>
    </select>
    </form>
    </body>
    </html>

  • #9
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,907
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    You have appended the B suffix to some Javascript keywords, you should have done this only to function and variable names (names that you chose). And missed some function names out. This works now and ought to continue to work when you replace the various options by your own.

    Although function getValueB() simply alerts the choices, you will need that to pass the chosen options to whatever server-side script is involved.

    Code:
    var nListsB = 3; // number of select lists in the set
    
    function fillSelectB(currCatB, currListB){
    var stepB = Number(currListB.name.replace(/\D/g,""));  // capture the suffix digit
    for (iB = stepB; iB<nListsB+1; iB++) {
    document.forms[0]['ListB'+iB].length = 1;
    document.forms[0]['ListB'+iB].selectedIndex = 0;
    }
    var nCatB = categoriesB[currCatB];
    for (each in nCatB) {
    var nOptionB = document.createElement('option'); 
    var nDataB = document.createTextNode(nCatB[each]); 
    nOptionB.setAttribute('value',nCatB[each]); 
    nOptionB.appendChild(nDataB); 
    currListB.appendChild(nOptionB); 
    } 
    }
    
    function getValueB(L3, L2, L1) {
    alert("Your selection was:- \n" + L1 + "\n" + L2 + "\n" + L3);
    }
    
    function initB() {
    fillSelectB('startListB',document.forms['tripleplay']['ListB1'])
    }
    
    navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', initB, false) : addEventListener('load', initB, false);	
    
    </script> 
    </head>
    <body>
    <form name="tripleplay" action="">
    <select name='ListB1' onchange="fillSelectB(this.value,this.form['ListB2'])">
    <option selected>Make a selection</option>
    </select>
    &nbsp;
    <select name='ListB2' onchange="fillSelectB(this.value,this.form['ListB3'])">
    <option selected>Make a selection</option>
    </select>
    &nbsp;
    <select name='ListB3' onchange="getValueB(this.value, this.form['ListB2'].value, 
    this.form['ListB1'].value)">
    <option selected >Make a selection</option>
    </select>
    Last edited by Philip M; 12-14-2010 at 07:46 AM.

  • #10
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Hi, it's me again. I've done some changes on my web page and I would need 4 stage I tried to modify the script but I can't get pass de stage 3, the alert pop-up to soon... Thank you again for your help.
    Code:
    <script type="text/javascript">
    <html>
    <head>
      <form name="tripleplay" method="post" action="sendmail.php">
    
    var categories = [];
    categories["startList"] = ["Battant","Coulissante","Guillotine simple","Auvent","Imposte","Porte d'entrée","Porte Patio","Porte Jardin"]
    categories["Battant"] = ["PVC","Combo Aluminium","Combo PVC"];
    categories["Coulissante"] = ["PVC","Bois","Combo Aluminium","Combo PVC"];
    categories["Guillotine simple"] = ["PVC","Combo Aluminium","Combo PVC"];
    categories["Auvent"] = ["PVC","Combo Aluminium","Combo PVC"];
    categories["Imposte"] = ["PVC","Combo Aluminium","Combo PVC"];
    categories["Porte d'entrée"] = ["1 side","2 side"];
    categories["Porte Patio"] = ["5 pieds","6 pieds","7 pieds","8 pieds","9 pieds"];
    categories["Porte Jardin"] = ["5 pieds","6 pieds"];
    categories["PVC"] = ["carr complet","carr contour","carr haut"];
    categories["Combo Aluminium"] = ["carr complet","carr contour","carr haut"];
    categories["Combo PVC"] = ["carr complet","carr contour","carr haut"];
    categories["Combo PVC"] = ["carr complet","carr contour","carr haut","Bois"];
    categories["carr complet"] = ["Clair","Low e argon"];
    var nLists = 4; // number of lists in the set
    
    function fillSelect(currCat,currList){
    var step = Number(currList.name.replace(/\D/g,""));
    for (i=step; i<nLists+1; i++) {
    document.forms[0]['List'+i].length = 1;
    document.forms[0]['List'+i].selectedIndex = 0;
    }
    var nCat = categories[currCat];
    for (each in nCat) {
    var nOption = document.createElement('option'); 
    var nData = document.createTextNode(nCat[each]); 
    nOption.setAttribute('value',nCat[each]); 
    nOption.appendChild(nData); 
    currList.appendChild(nOption); 
    } 
    }
    
    function getValue(L4, L3, L2, L1) {
    alert("Your selection was:- \n" + L1 + "\n" + L2 + "\n" + L3 + "\n" + L4);
    }
    
    function init() {
    fillSelect('startList',document.forms['tripleplay']['List1'])
    }
    
    navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', init, false) : addEventListener('load', init, false);	
    
    </script>
    </head>
    
      <select name='List1' onChange="fillSelect(this.value,this.form['List2'])">
        <option selected>Produit</option>
      </select>
      &nbsp;
      <select name='List2' onChange="fillSelect(this.value,this.form['List3'])">
        <option selected>Spécification</option>
      </select>
      &nbsp;
      <select name='List3' onChange="getValue(this.value, this.form['List2'].value, 
    this.form['List1'].value)">
        <option selected >Spécification</option>
      </select>
            <select name='List4' id="List4" onChange="getValue(this.value, this.form['List3'].value, 
    this.form['List2'].value, this.form['List1'].value)">
              <option selected >Sp&eacute;cification</option>
            </select>
          </p>      </td>
    	  <td width="129" rowspan="2" bgcolor="#CCCCCC"><div align="center">
    	    <input name="Largeur4" type="text" id="Largeur4" size="2">
    	    X
    	    <input name="Hauteur4" type="text" id="Hauteur4" size="2">
          </div></td>
    	  <td width="75" rowspan="2" bgcolor="#CCCCCC"><div align="center">
    	    <input name="Quantite4" type="text" id="Quantite4" size="2">
          </div></td>
    	  <td width="100" rowspan="2" bgcolor="#CCCCCC"><input name="Boite_1" type="text" id="Boite_1" size="8">
    	    <select name="Boite1" id="Boite1">
              <option selected>rec 1 côté</option>
              <option>rec 2 côté</option>
          </select></td>
    </form>
    </html>

  • #11
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,071
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Lightbulb

    I'm having trouble reading your language, so this is just a proof of concept.
    Modified 'Philip M's code to add the extra level and labeled the descriptions as various "Level_x_y_z" etc.

    I could not think of any example that would need to dive into that many levels.

    Code:
    <html>
    <head>
    
    <script type="text/javascript">
    
    var categories = [];
    categories["Level"] = ["Level_1_1","Level_1_2"]
    
    categories["Level_1_1"] = ["Level_2_1","Level_2_2"];
    categories["Level_1_2"] = ["Level_2_3","Level_2_4","Level_2_5"];
    
    categories["Level_2_1"] = ["Level_3_1","Level_3_2","Level_3_3","Level_3_4"];
    categories["Level_2_2"] = ["Level_3_5","Level_3_6","Level_3_7"];
    categories["Level_2_3"] = ["Level_3_8","Level_3_9","Level_3_10"];
    categories["Level_2_4"] = ["Level_3_11","Level_3_12"];
    categories["Level_2_5"] = ["Level_3_13","Level_3_14","Level_3_15", "Level_3_16"];
    
    categories["Level_3_1"] = ["Level_4_A","Level_4_B","Level_4_C", "Level_4_D"];
    categories["Level_3_2"] = ["Level_4_E","Level_4_F","Level_4_G", "Level_4_H"];
    categories["Level_3_3"] = ["Level_4_I","Level_4_J","Level_4_K", "Level_4_L"];
    categories["Level_3_4"] = ["Level_4_M","Level_4_N","Level_4_O", "Level_4_P"];
    categories["Level_3_5"] = ["Level_4_Q","Level_4_R","Level_4_S", "Level_4_T"];
    categories["Level_3_6"] = ["Level_4_U","Level_4_V","Level_4_W", "Level_4_X"];
    categories["Level_3_7"] = ["Level_4_Y","Level_4_Z","Level_4_A1", "Level_4_B1"];
    categories["Level_3_8"] = ["Level_4_C1","Level_4_D1","Level_4_E1", "Level_4_F1"];
    categories["Level_3_9"] = ["Level_4_a","Level_4_b","Level_4_c", "Level_4_d"];
    categories["Level_3_10"] = ["Level_4_e","Level_4_f","Level_4_g", "Level_4_h"];
    categories["Level_3_11"] = ["Level_4_i","Level_4_j","Level_4_k", "Level_4_l"];
    categories["Level_3_12"] = ["Level_4_m","Level_4_n","Level_4_o", "Level_4_p"];
    categories["Level_3_13"] = ["Level_4_q","Level_4_r","Level_4_s", "Level_4_t"];
    categories["Level_3_14"] = ["Level_4_u","Level_4_v","Level_4_w", "Level_4_x"];
    categories["Level_3_15"] = ["Level_4_y","Level_4_z","Level_4_a1", "Level_4_b1"];
    categories["Level_3_16"] = ["Level_4_c1","Level_4_d1","Level_4_e1", "Level_4_f1"];
    
    var nLists = 4; // number of lists in the set
    
    function fillSelect(currCat,currList){
      var step = Number(currList.name.replace(/\D/g,""));
      for (i=step; i<nLists+1; i++) {
        document.forms[0]['List'+i].length = 1;
        document.forms[0]['List'+i].selectedIndex = 0;
      }
      var nCat = categories[currCat];
      for (each in nCat) {
        var nOption = document.createElement('option'); 
        var nData = document.createTextNode(nCat[each]); 
        nOption.setAttribute('value',nCat[each]); 
        nOption.appendChild(nData); 
        currList.appendChild(nOption); 
      } 
    }
    
    function getValue(L4, L3, L2, L1) {
      alert("Your selection was:- \n" + L1 + "\n" + L2 + "\n" + L3 + "\n" + L4);
    }
    
    function init() {
      fillSelect('Level',document.forms[0]['List1'])
    }
    
    navigator.appName == "Microsoft Internet Explorer"
                       ? attachEvent('onload', init, false) 
                       : addEventListener('load', init, false);	
    
    </script>
    </head>
    
    <body>
    <form action="">
    <select name='List1' onchange="fillSelect(this.value,this.form['List2'])">
    <option selected>Make a selection</option>
    </select>
    &nbsp;
    <select name='List2' onchange="fillSelect(this.value,this.form['List3'])">
    <option selected>Make a selection</option>
    </select>
    &nbsp;
    <select name='List3' onchange="fillSelect(this.value,this.form['List4'])">
    <option selected>Make a selection</option>
    </select>
    &nbsp;
    <select name='List4'
     onchange="getValue(this.value, this.form['List3'].value, this.form['List2'].value, this.form['List1'].value)">
    <option selected >Make a selection</option>
    </select>
    </form>
    
    </body>
    </html>
    Fill in your category array descriptions as needed.

    Good Luck!

  • Users who have thanked jmrker for this post:

    ezrian (01-23-2011)

  • #12
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Smile

    Thank's to all of you, my web page is finally functional. I used a total of 5 list in the code "List", "ListB", "ListC", "ListD" and "ListE"

    Just for information here's the part of the code for "List" and "ListC" :
    And here's a link to the page where the code is use :
    http://www.ggirardetfils.com/form.htm

    I hope this will help some else.

    Code:
    <html>
    <head>
    <script type="text/javascript">
    
    var categories = [];
    categories["startList"] = ["Battant","Coulissante","Guillotine simple","Auvent","Imposte"]
    
    categories["Battant"] = ["PVC","Combo PVC","Combo Aluminium"];
    categories["Coulissante"] = ["PVC","Bois","Combo PVC","Combo Aluminium"];
    categories["Guillotine simple"] = ["PVC","Combo PVC","Combo Aluminium"];
    categories["Auvent"] = ["PVC","Combo PVC","Combo Aluminium"];
    categories["Imposte"] = ["PVC","Combo PVC","Combo Aluminium"];
    
    categories["PVC"] = ["Low e argon","Clair"];
    categories["Combo Aluminium"] = ["Low e argon","Clair"];
    categories["Combo PVC"] = ["Low e argon","Clair"];
    categories["Bois"] = ["Low e argon","Clair"];
    
    categories["Low e argon"] = ["Complet","Contour","Haut"]
    categories["Clair"] = ["Complet","Contour","Haut"];
    
    
    
    var nLists = 4; // number of lists in the set
    
    function fillSelect(currCat,currList){
    var step = Number(currList.name.replace(/\D/g,""));
    for (i=step; i<nLists+1; i++) {
    document.forms[0]['List'+i].length = 1;
    document.forms[0]['List'+i].selectedIndex = 0;
    }
    var nCat = categories[currCat];
    for (each in nCat) {
    var nOption = document.createElement('option'); 
    var nData = document.createTextNode(nCat[each]); 
    nOption.setAttribute('value',nCat[each]); 
    nOption.appendChild(nData); 
    currList.appendChild(nOption); 
    } 
    }
    
    function getValue(L4, L3, L2, L1) {
    }
    
    function init() {
    fillSelect('startList',document.forms['tripleplay']['List1'])
    }
    
    navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', init, false) : addEventListener('load', init, false);	
    
    </script>
    
    <script type="text/javascript">
    
    var categoriesC = [];
    categoriesC["startListC"] = ["5 pieds","6 pieds","7 pieds","8 pieds","9 pieds"]
    
    categoriesC["5 pieds"] = ["Low e argon","Clair"];
    categoriesC["6 pieds"] = ["Low e argon","Clair"];
    categoriesC["7 pieds"] = ["Low e argon","Clair"];
    categoriesC["8 pieds"] = ["Low e argon","Clair"];
    categoriesC["9 pieds"] = ["Low e argon","Clair"];
    
    categoriesC["Low e argon"] = ["Complet","Contour","Haut"]
    categoriesC["Clair"] = ["Complet","Contour","Haut"];
    
    var nListsC = 3; // number of select lists in the set
    
    function fillSelectC(currCatC, currListC){
    var stepC = Number(currListC.name.replace(/\D/g,""));  // capture the suffix digit
    for (iC = stepC; iC<nListsC+1; iC++) {
    document.forms[0]['ListC'+iC].length = 1;
    document.forms[0]['ListC'+iC].selectedIndex = 0;
    }
    var nCatC = categoriesC[currCatC];
    for (each in nCatC) {
    var nOptionC = document.createElement('option'); 
    var nDataC = document.createTextNode(nCatC[each]); 
    nOptionC.setAttribute('value',nCatC[each]); 
    nOptionC.appendChild(nDataC); 
    currListC.appendChild(nOptionC); 
    } 
    }
    
    function getValueC(L3, L2, L1) {
    }
    
    function initC() {
    fillSelectC('startListC',document.forms['tripleplay']['ListC1'])
    }
    
    navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', initC, false) : addEventListener('load', initC, false);	
    
    </script>
    </head>
    
    <body>
    <form name="tripleplay" method="post" action="sendmail.php">
      <p>
      <select name='List1' onChange="fillSelect(this.value,this.form['List2'])">
        <option selected>Produit</option>
      </select>
      &nbsp;
      <select name='List2' onChange="fillSelect(this.value,this.form['List3'])">
        <option>Mat&eacute;riel</option>
      </select>
      &nbsp;
      <select name='List3' onChange="fillSelect(this.value,this.form['List4'])">
        <option selected>Teinte</option>
      </select>
      &nbsp;
      <select name='List4'
     onchange="getValue(this.value, this.form['List3'].value, this.form['List2'].value, this.form['List1'].value)">
        <option selected >Carrelage</option>
      </select>
      </p>
      <p> 
        <select name='ListC1' onChange="fillSelectC(this.value,this.form['ListC2'])">
          <option selected>Hauteur</option>
        </select>
        &nbsp;
        <select name='ListC2' onChange="fillSelectC(this.value,this.form['ListC3'])">
          <option selected>Teinte</option>
        </select>
        &nbsp;
        <select name='ListC3' onChange="getValueC(this.value, this.form['ListC2'].value, 
    this.form['ListC1'].value)">
          <option>Carrelage</option>
        </select>
        </p>
    </form>
    </body>
    <html>


  •  

    Posting Permissions

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