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 15 of 15
  1. #1
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    9
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Help needed for duplicating sets of Triple Drop Down menu.

    Dear all,

    Below are my current script. I need another few more sets of the triple drop down menu same as the below script... (Scenario: creating like a online shopping order form, where customers can have multiple orders.) Please guide me how to do so.. Thank you in advance.



    <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 categories = [];
    categories["startList"] = ["Wearing Apparel","Books"]
    categories["Wearing Apparel"] = ["Men","Women","Children"];
    categories["Books"] = ["Biography","Fiction","Nonfiction"];
    categories["Men"] = ["Shirts","Ties","Belts","Hats"];
    categories["Women"] = ["Blouses","Skirts","Scarves", "Hats"];
    categories["Children"] = ["Shorts", "Socks", "Coats", "Nightwear"];
    categories["Biography"] = ["Contemporay","Historical","Other"];
    categories["Fiction"] = ["Science Fiction","Romance", "Thrillers", "Crime"];
    categories["Nonfiction"] = ["How-To","Travel","Cookbooks", "Old Churches"];

    var nLists = 3; // number of select 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['tripleplay']['List'+i].length = 1;
    document.forms['tripleplay']['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['tripleplay']['List1'])
    }

    navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', init, false) : addEventListener('load', init, false);

    </script>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Untitled Document</title>
    </head>

    <body>
    <form name="tripleplay" 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>

  • #2
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    9
    Thanks
    2
    Thanked 0 Times in 0 Posts
    anyone here can help me out with this? need it urgently.

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

    Lightbulb

    Lack of planning on your part does not constitute an emergency on our part.
    Code:
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Multi-Dropdown Displays</title>
    <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
    
    Multi-display:
    Modified by: JMRKER
    */
    
    var categories = [];
    categories["startList"] = ["Wearing Apparel","Books"]
    categories["Wearing Apparel"] = ["Men","Women","Children"];
    categories["Books"] = ["Biography","Fiction","Nonfiction"];
    categories["Men"] = ["Shirts","Ties","Belts","Hats"];
    categories["Women"] = ["Blouses","Skirts","Scarves", "Hats"];
    categories["Children"] = ["Shorts", "Socks", "Coats", "Nightwear"];
    categories["Biography"] = ["Contemporay","Historical","Other"];
    categories["Fiction"] = ["Science Fiction","Romance", "Thrillers", "Crime"];
    categories["Nonfiction"] = ["How-To","Travel","Cookbooks", "Old Churches"];
    
    var nLists = 3; // number of select 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['tripleplay']['List'+i].length = 1;
        document.forms['tripleplay']['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['tripleplay']['List11'])
      fillSelect('startList',document.forms['tripleplay']['List21'])
    }
    
    navigator.appName == "Microsoft Internet Explorer" 
                       ? attachEvent('onload', init, false) 
                       : addEventListener('load', init, false);
    
    </script>
    <style type="text/css">
    #ddDisplay1 { width:200px; float:left; }
    </style>
    
    </head>
    
    <body>
    <form name="tripleplay" action="" onsubmit="return false">
    
    <div id="ddDisplay1">
    <select name='List11'
     onchange="fillSelect(this.value,this.form['List12'])">
     <option selected>Make a selection</option>
    </select><br>
    <select name='List12'
     onchange="fillSelect(this.value,this.form['List13'])">
     <option selected>Make a selection</option>
    </select><br>
    <select name='List13'
     onchange="getValue(this.value, this.form['List12'].value, this.form['List11'].value)">
     <option selected >Make a selection</option>
    </select>
    </div>
    
    <div id="ddDisplay2">
    <select name='List21'
     onchange="fillSelect(this.value,this.form['List22'])">
     <option selected>Make a selection</option>
    </select><br>
    <select name='List22'
     onchange="fillSelect(this.value,this.form['List23'])">
     <option selected>Make a selection</option>
    </select><br>
    <select name='List23'
     onchange="getValue(this.value, this.form['List22'].value,
    this.form['List21'].value)">
     <option selected >Make a selection</option>
    </select>
    </div>
    
    <br style="clear:both">
    </form>
    </body>
    </html>

  • Users who have thanked jmrker for this post:

    creativ3 (07-11-2011)

  • #4
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    9
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks a million...

    Sorry if I have not done any editing on that script. As I am very new to html & javascript... My current knowledge is still at the level of trial error... Editing of text by luck...



  • #5
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    9
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Dear jmrker,

    I am facing a problem. Attached picture is what I am facing. Hope you are able to help me on that.

    Thank you jmrker.
    Attached Thumbnails Attached Thumbnails Help needed for duplicating sets of Triple Drop Down menu.-help.jpg  

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

    Exclamation

    Quote Originally Posted by creativ3 View Post
    Dear jmrker,

    I am facing a problem. Attached picture is what I am facing. Hope you are able to help me on that.

    Thank you jmrker.
    A picture may be worth a thousand words,
    but a picture of the problem does not help when the code is missing.
    I can change the code, I can not change the picture.

  • #7
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    9
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Sorry forget to attach the script as well...

    var categories = [];
    categories["startList"] = ["Play with words","Print a Photo","Psychedelic","Our Brand","Its Play Time","Fun Rugby","Clubbin","Pop Art","Huge Accessories","Love Is In The Air","All bout Love","Dragonboat","Outdoor Fun","Sunny Boys n Girls","Happy","Pride","Junk Foods","Donuts","The Voodoo","Board Games","Write On It","Children"]
    categories["Play with words"] = ["A1","A2"];
    categories["A1"] = ["Baby TShirts","Kids TShirts"];
    categories["A2"] = ["Baby TShirts","Teens TShirts"];

    var nLists = 3; // number of select 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['tripleplay']['List'+i].length = 1;
    document.forms['tripleplay']['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['tripleplay']['List11'])
    fillSelect('startList',document.forms['tripleplay']['List21'])
    }

    navigator.appName == "Microsoft Internet Explorer"
    ? attachEvent('onload', init, false)
    : addEventListener('load', init, false);

    </script>

    </head>

    <body>
    <form name="tripleplay" action="" onSubmit="return false">

    <select name='List11'
    onchange="fillSelect(this.value,this.form['List12'])">
    <option selected>Make a selection</option>
    </select>
    &nbsp;
    <select name='List12'
    onChange="fillSelect(this.value,this.form['List13'])">
    <option selected>Make a selection</option>
    </select>
    &nbsp;
    <select name='List13'
    onChange="getValue(this.value, this.form['List12'].value, this.form['List11'].value)">
    <option selected >Make a selection</option>
    </select>
    <br>
    <br>
    <select name='List21'
    onchange="fillSelect(this.value,this.form['List22'])">
    <option selected>Make a selection</option>
    </select>
    &nbsp;
    <select name='List22'
    onChange="fillSelect(this.value,this.form['List23'])">
    <option selected>Make a selection</option>
    </select>
    &nbsp;
    <select name='List23'
    onChange="getValue(this.value, this.form['List22'].value,
    this.form['List21'].value)">
    <option selected >Make a selection</option>
    </select>
    <br>
    <br>
    </form>
    </body>
    </html>

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

    Lightbulb

    You don't have any of the arrays defined except: "Play with words"

    Code:
    categories["startList"]
     = ["Play with words","Print a Photo","Psychedelic","Our Brand","Its Play Time","Fun Rugby","Clubbin","Pop Art",
        "Huge Accessories","Love Is In The Air","All bout Love","Dragonboat","Outdoor Fun","Sunny Boys n Girls",
        "Happy","Pride","Junk Foods","Donuts","The Voodoo","Board Games","Write On It","Children"];
    categories["Play with words"] = ["A1","A2"];
    categories["A1"] = ["Baby TShirts","Kids TShirts"];
    categories["A2"] = ["Baby TShirts","Teens TShirts"];

  • #9
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    9
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Yes I have.. But trying out on the 1st one... If success will continue the rest of them.... As different series will have different products.

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

    Question

    Quote Originally Posted by creativ3 View Post
    Yes I have.. But trying out on the 1st one... If success will continue the rest of them.... As different series will have different products.
    So...what is the problem?
    The first one works fine for me in FF.

  • #11
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    9
    Thanks
    2
    Thanked 0 Times in 0 Posts
    There is an error when the wrong selection was made. E.G If I choose Play with Words at column A then selecting A1 accidentally when it was A2 I wanted, then column C will show both A1 and A2's selection.

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

    Lightbulb

    Quote Originally Posted by creativ3 View Post
    There is an error when the wrong selection was made. E.G If I choose Play with Words at column A then selecting A1 accidentally when it was A2 I wanted, then column C will show both A1 and A2's selection.
    I started fresh from the original codes (see references) and substituted your 'categories' array.
    Then I don't see the problem. Check your script against this (line by line) to find the difference.
    Code:
    <html>
    <head>
    <title> 3-level Drop Down</title>
    <script type="text/javascript">
    // From: http://www.codingforums.com/showthread.php?t=202456
    // and: http://www.codingforums.com/showthread.php?t=169465
    
    /*
    var categories = [];
      categories["startList"] = ["Apparel","Books"];			// Level 1
      categories["Apparel"] = ["Men","Women"];				// Level 2
      categories["Men"] = ["Shirts","Ties","Belts"];			// Level 3
      categories["Women"] = ["Blouses","Skirts","Scarves"];
    	  
      categories["Books"] = ["Biography","Fiction","Nonfiction"];		// Level 2
      categories["Biography"] = ["Contemporay","Historical","Other"];	// Level 3
      categories["Fiction"] = ["Science","Romance"];
      categories["Nonfiction"] = ["How-To","Travel","Cookbooks"];
    */
    
    var categories = [];
    categories["startList"] = [
      "Play with words","Print a Photo","Psychedelic","Our Brand","Its Play Time",
      "Fun Rugby","Clubbin","Pop Art","Huge Accessories","Love Is In The Air",
      "All bout Love","Dragonboat","Outdoor Fun","Sunny Boys n Girls","Happy",
      "Pride","Junk Foods","Donuts","The Voodoo","Board Games","Write On It","Children"];
    
    categories["Play with words"] = ["A1","A2"];
    categories["A1"] = ["Baby TShirts","Kids TShirts"];
    categories["A2"] = ["Baby TShirts","Teens TShirts"];
    
    categories['Print a Photo'] = ['B1','B2'];
    categories['B1'] = ['3x5','4x6'];
    categories['B2'] = ['5x7','8x10'];
    
    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 getValues() { 
      var str = '';
    	  str += document.getElementById('List1').value+'\n';
    	  str += document.getElementById('List2').value+'\n';
    	  str += document.getElementById('List3').value+'\n';
      alert(str); 
    }
    
    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' id="List1" onchange="fillSelect(this.value,this.form['List2'])">
    <option selected>Make a selection</option>
    </select>
    &nbsp;
    <select name='List2' id="List2" onchange="fillSelect(this.value,this.form['List3'])">
    <option selected>Make a selection</option>
    
    </select>
    &nbsp;
    <select name='List3' id="List3" onchange="getValues()">
    <option selected >Make a selection</option>
    </select>
    </form>
    
    </body>
    </html>

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

    Lightbulb Fixed...

    I see the problem you are having now.
    It is in the calls and execution of the 'fillSelect' function.

    This should eliminate your problem.
    Code:
    <html>
    <head>
    <title> 3-level Drop Down</title>
    <script type="text/javascript">
    // From: http://www.codingforums.com/showthread.php?t=202456
    // and: http://www.codingforums.com/showthread.php?t=169465
    
    var categories = [];
    categories["startList"] = [
      "Play with words","Print a Photo","Psychedelic","Our Brand","Its Play Time",
      "Fun Rugby","Clubbin","Pop Art","Huge Accessories","Love Is In The Air",
      "All bout Love","Dragonboat","Outdoor Fun","Sunny Boys n Girls","Happy",
      "Pride","Junk Foods","Donuts","The Voodoo","Board Games","Write On It","Children"];
    
    categories["Play with words"] = ["A1","A2"];
    categories["A1"] = ["Baby TShirts","Kids TShirts"];
    categories["A2"] = ["Baby TShirts","Teens TShirts"];
    
    categories['Print a Photo'] = ['B1','B2'];
    categories['B1'] = ['3x5','4x6'];
    categories['B2'] = ['5x7','8x10'];
    
    var nLists = 3; // number of lists in the set
    
    function fillSelect(currCat,currList) {
      oSel1 = document.getElementById(currList);  // alert(oSel1.id);
      oSel1.options.length = 0;
      oSel1.options[oSel1.options.length] = new Option('Select an option','',false,false);
      for (i=0; i < categories[currCat].length; i++) {
        oSel1.options[oSel1.options.length] 
          = new Option(categories[currCat][i],categories[currCat][i], false,false);
      }
    }
    
    function getValue(L3, L2, L1) {
      var str = "Your selection was:";
          str += "\n"+document.getElementById(L3).value;
          str += "\n"+document.getElementById(L2).value;
          str += "\n"+document.getElementById(L1).value;
      alert(str);
    }
    
    function init() {
     fillSelect('startList','List11');
     fillSelect('startList','List21');
    }
    
    navigator.appName == "Microsoft Internet Explorer"
    				   ? attachEvent('onload', init, false) 
    				   : addEventListener('load', init, false);	
    
    </script>
    <style type="text/css">
    #ddDisplay1 { width:200px; float:left; }
    </style>
    </head>
    
    <body>
    <form action="" onsubmit="return false">
    <div id="ddDisplay1">
    <select name='List11' id="List11"
     onchange="fillSelect(this.value,'List12')">
     <option selected>Make a selection</option>
    </select><br>
    <select name='List12' id="List12"
     onchange="fillSelect(this.value,'List13')">
     <option selected>Make a selection</option>
    </select><br>
    <select name='List13' id="List13" onchange="getValue('List13', 'List12', 'List11')">
     <option selected >Make a selection</option>
    </select>
    </div>
    
    <div id="ddDisplay2">
    <select name='List21' id="List21"
     onchange="fillSelect(this.value,'List22')">
     <option selected>Make a selection</option>
    </select><br>
    <select name='List22' id="List22"
     onchange="fillSelect(this.value,'List23')">
     <option selected>Make a selection</option>
    </select><br>
    <select name='List23' id="List23" onchange="getValue('List23', 'List22', 'List21')">
     <option selected >Make a selection</option>
    </select>
    </div>
    
    <br style="clear:both">
    </form>
    
    </body>
    </html>
    Last edited by jmrker; 07-12-2011 at 06:39 PM.

  • Users who have thanked jmrker for this post:

    creativ3 (07-14-2011)

  • #14
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    9
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Jmrker, Big thank you for your help. Greatly appreciated. By the way are you able to teach how am I suppose to collate all informations and submit and send to my email.

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

    Thumbs up

    Quote Originally Posted by creativ3 View Post
    Jmrker, Big thank you for your help. Greatly appreciated. By the way are you able to teach how am I suppose to collate all informations and submit and send to my email.
    You're most welcome.
    Happy to help.

    I don't know what or where the question is for your email problem.

    You might be able to use the "mailto" attribute of the anchor tag <a href=mailto:.... >
    but this is not recommended because your server might ignore the request.
    You can read more about this and the associated problems with a google search.

    If this is a commercial site, you would be better off contacting your service provider
    to see how to collect the information submitted via the <form> tag.

    Good Luck!


  •  

    Posting Permissions

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