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 Coder
    Join Date
    Jul 2011
    Posts
    43
    Thanks
    11
    Thanked 0 Times in 0 Posts

    Question Triple Drop down list help

    Hello All,

    I am trying to create a three drop down lists for my job. The three drop downs would be:

    Degree Type (certificate, associate's, bachelor's, etc)
    Category (Arts & Humanities, Automotive, Computers & IT etc.)
    Program (Desktop Publishing, Automotive Technician Training, Network Systems, etc.)

    The Category list needs to be dependent on the degree type and the Program list needs to be dependent on the Category list. I need to have values that will submit to my form but ONLY for the Program List.

    For example:

    <option value="CECS">Cisco</option>
    <option value="CEIT">Information Technology (General)</option>
    <option value="CEMS">Microsoft</option>
    <option value="CENSYS">Network Systems</option>

    Please note that I must use these program codes as values and I cannot use the option name as the value.

    This does not have to look good, it just needs to work as it is for internal use only within my company. This form will never be used by random web surfers.

    If someone can point me to a tutorial for a good triple drop down that will pass ONLY the values of the third list, that would be great! Thanks!

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,298
    Thanks
    203
    Thanked 2,561 Times in 2,539 Posts
    Have a look at:-

    http://www.javascriptkit.com/script/...plecombo.shtml


    It is your responsibility to die() if necessary….. - PHP Manual

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • Users who have thanked Philip M for this post:

    dareichmann (07-25-2011)

  • #3
    New Coder
    Join Date
    Jul 2011
    Posts
    43
    Thanks
    11
    Thanked 0 Times in 0 Posts
    How do I assign values to each of the options using that method?

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,298
    Thanks
    203
    Thanked 2,561 Times in 2,539 Posts
    Quote Originally Posted by dareichmann View Post
    How do I assign values to each of the options using that method?
    I don't understand you. Surely it is obvious.

    Code:
    var categories = [];
    categories["startList"] = ["Wearing Apparel","Books"];
    // second list sub-categories
    categories["Wearing Apparel"] = ["Men","Women","Children"];
    categories["Books"] = ["Biography","Fiction","Nonfiction"];
    // third list Wearing Apparel sub-categories
    categories["Men"] = ["Shirts","Ties","Belts","Hats", "Underwear"];
    categories["Women"] = ["Blouses","Skirts","Scarves", "Hats", "Underwear"];
    categories["Children"] = ["Shorts", "Socks", "Coats", "Nightwear", "Underwear"];
    // third list Books sub-categories
    categories["Biography"] = ["Contemporay","Historical","Other"];
    categories["Fiction"] = ["Science Fiction","Romance", "Thrillers", "Crime", "Westerns"];
    categories["Nonfiction"] = ["How-To","Travel","Cookbooks", "Old Churches"];

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • Users who have thanked Philip M for this post:

    dareichmann (07-25-2011)

  • #5
    New Coder
    Join Date
    Jul 2011
    Posts
    43
    Thanks
    11
    Thanked 0 Times in 0 Posts
    I understand that Nonfiction is the category and "How-To","Travel","Cookbooks", "Old Churches" are the values, but how would i set my form to pass different values to my database? What if a user selects "How-To" in the drop down but I want it to post to my database as O1 or some other means of organization in my database?

    In other words, I want my users to see "How-To","Travel","Cookbooks", "Old Churches" as their options, but i want my form to post the data to my databases it as "O1","O2","O3"

    I hope that makes sense.

  • #6
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,298
    Thanks
    203
    Thanked 2,561 Times in 2,539 Posts
    Quote Originally Posted by dareichmann View Post
    I understand that Nonfiction is the category and "How-To","Travel","Cookbooks", "Old Churches" are the values, but how would i set my form to pass different values to my database? What if a user selects "How-To" in the drop down but I want it to post to my database as O1 or some other means of organization in my database?

    In other words, I want my users to see "How-To","Travel","Cookbooks", "Old Churches" as their options, but i want my form to post the data to my databases it as "O1","O2","O3"

    I hope that makes sense.
    It makes sense but the script does not lend itself to that.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #7
    New Coder
    Join Date
    Jul 2011
    Posts
    43
    Thanks
    11
    Thanked 0 Times in 0 Posts
    Is there a method that you would suggest that would allow me to accomplish what i am looking for?

  • #8
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,145
    Thanks
    38
    Thanked 505 Times in 499 Posts

    Lightbulb Something to consider ...

    Note modifications to 'PhillipM's original code.

    Change the parts after the colons ':', to match what you want to send to your dBase.

    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <title> Triple Combo </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
    
    Modified by: jmrker
    */
    
    var categories = [];
    categories["startList"] = ["Wearing Apparel:A","Books:B"];
    
    categories["Wearing Apparel"] = ["Men:A1","Women:A2","Children:A3"];
    categories["Men"] = ["Shirts:A11","Ties:A12","Belts:A13","Hats:A14"];
    categories["Women"] = ["Blouses:A21","Skirts:A22","Scarves:A23", "Hats:A24"];
    categories["Children"] = ["Shorts:A31", "Socks:A32", "Coats:A33", "Nightwear:A34"];
    
    categories["Books"] = ["Biography:B1","Fiction:B2","Nonfiction:B3"];
    categories["Biography"] = ["Contemporay:B11","Historical:B12","Other:B13"];
    categories["Fiction"] = ["Science Fiction:B21","RomanceB22", "Thrillers:B23", "Crime:B24"];
    categories["Nonfiction"] = ["How-To:O1","Travel:O2","Cookbooks:O3", "Old Churches:O4"];
    
    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 tmp = currCat.split(':');
      var nCat = categories[tmp[0]];
      for (each in nCat) {
        tmp = nCat[each].split(':');
        var nOption = document.createElement('option'); 
        var nData = document.createTextNode(tmp[0]); 
        nOption.setAttribute('value',nCat[each]); 
        nOption.appendChild(nData); 
        currList.appendChild(nOption); 
      } 
    }
    
    function getValue(L3, L2, L1) {
      var l3 = L3.split(':');
      var l2 = L2.split(':');
      var l1 = L1.split(':');
    //  alert("Your selection was:- \n" + L1 + "\n" + L2 + "\n" + L3);
      alert("Your selection was:- \n" + l1[1] + "\n" + l2[1] + "\n" + l3[1]);
    }
    
    function init() {
      fillSelect('startList',document.forms['tripleplay']['List1'])
    }
    
    navigator.appName == "Microsoft Internet Explorer" 
                       ? attachEvent('onload', init, false) 
                       : addEventListener('load', init, false);	
    
    </script> 
    </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>
    Good Luck!

  • The Following 2 Users Say Thank You to jmrker For This Useful Post:

    dareichmann (07-26-2011), Philip M (07-26-2011)

  • #9
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,298
    Thanks
    203
    Thanked 2,561 Times in 2,539 Posts
    Thanks jmrker, that is a neat way of doing it.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #10
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,145
    Thanks
    38
    Thanked 505 Times in 499 Posts

    Thumbs up

    Quote Originally Posted by Philip M View Post
    Thanks jmrker, that is a neat way of doing it.
    You're most welcome.

    Note also that the ':' separators could just as easily be '|' separators
    if the contents to send to the dBase contain colons as in a URL link.

    Your code seems pretty flexible and could be adapted to N different levels
    with just a bit of caution for possible duplicate array names.

    Good Luck!

  • #11
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,298
    Thanks
    203
    Thanked 2,561 Times in 2,539 Posts
    Quote Originally Posted by jmrker View Post
    You're most welcome.

    Note also that the ':' separators could just as easily be '|' separators
    if the contents to send to the dBase contain colons as in a URL link.

    Your code seems pretty flexible and could be adapted to N different levels
    with just a bit of caution for possible duplicate array names.

    Good Luck!
    FWIIW, I normally use the tilde ~ as a delimiter.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #12
    New Coder
    Join Date
    Jul 2011
    Posts
    43
    Thanks
    11
    Thanked 0 Times in 0 Posts
    Thanks!


  •  

    Posting Permissions

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