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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 21
  1. #1
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Javascript Cascading Drop Down Menu With 4 Hierarchical Boxes

    Hey, so I'm a complete javascript newbie and am trying to create a drop down menu with four different boxes. The site I'm working on is basically an ecommerce site, so I'll use cars as a good example for what I want to do.

    Let's say that I'm selling cars and want to target the buyer directly, then I would have the following boxes, each one serving as a dependent of the one before it:

    1. Pick the brand (BMW, Mercedes, Etc.)
    2. Pick the type of car (Sports car, SUV, Mini Van, etc.)
    3. Pick the color (blue, green, etc.)
    4. Pick the price ($0-$19,999/$19,999-29,999/etc.)

    So far I have the first two boxes down by using the following site: http://www.supertom.com/menugen/. Now my problem is that the site only allows for the first two boxes to be made, and says that

    "the values in box1 are static and printed directly as normal HTML. The corresponding box2 options will also be copied into the HTML as well as the javascript for full functionality."

    Being a complete newbie, I have no idea what this means. So I decided to search the internet for an answer and was not able to find one, thus leading me here, which from the looks of it seems like a great forum.

    If anyone could tell me how to connect a third and fourth box that falls into the same hierarchy as the first and the second then I would appreciate.

    Really THANK YOU, and I'm really looking forward to reading your replies!!

    -Bobby

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,928
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Search the forum for multi-combo boxes. e.g.

    3-level dropdown box help - assigning a value? (jmrker)

    Here is another example:-
    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"];
    categories["Women"] = ["Blouses","Skirts","Scarves"];
    categories["Biography"] = ["Contemporay","Historical","Other"];
    categories["Fiction"] = ["Science","Romance"];
    categories["Nonfiction"] = ["How-To","Travel","Cookbooks"];
    
    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(isValue) {
    alert(isValue);
    }
    
    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)">
    <option selected >Make a selection</option>
    </select>
    </form>
    
    </body>
    </html>
    But taking your car example I do not see why four independent select lists will not suffice. If a non-existent combination (Mercedes Mini-Van Pink $100000) is chosen then the user may simply be advised and asked to select another combination.

    All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.
    Last edited by Philip M; 08-16-2010 at 10:50 AM.

  • #3
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Hello Philip

    Thanks for this code, I spend day looking for this. I have amended it for the purpose of proposing airport transfer on a web site. so it show
    Country/Airport/Resort ( e.g USA->JFK-> New York City )
    Do you know what code can I used for selected route to return a price
    e.g JFK to New York 50USD .
    Below is your code that I have used
    Thanks in advance Philip

    <html>
    <head>

    <script type="text/javascript">

    var categories = [];categories["startList"] = ["Spain","France","Turkey","Greece"]

    categories["Spain"] = ["Alicante","Barcelona","Malaga"];
    categories["France"] = ["Paris","NIce","Lyon"];
    categories["Turkey"] = ["Dalaman","Antalya","Bodrum"];
    categories["Greece"] = ["Athens","Rhodes","Zante"];
    categories["Alicante"] = ["Benidorm","El Abir","Finestra"];
    categories["Barcelona"] = ["Lloret","Santa Suzanna","La Pineda"];
    categories["Malaga"] = ["Puerto Banus","Fuengirola","Benalmadena"];
    categories["Paris"] = ["Paris","Disneyland","Orly"];
    categories["Nice"] = ["Nice","Monaco","Cannes"];
    categories["Lyon"] = ["A","B","C"];
    categories["Dalaman"] = ["A","B","C"];
    categories["Antalya"] = ["d","e","f"];
    categories["Bodrum"] = ["g","h","i"];
    categories["Athens"] = ["1","2","3"];
    categories["Rhodes"] = ["1a","2b","3c"];
    categories["Zante"] = ["V","Y","A"];

    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(isValue) {
    alert(isValue);
    }

    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>Select Country</option>
    </select>
    &nbsp;
    <select name='List2' onchange="fillSelect(this.value,this.form['List3'])">
    <option selected>Select Airport</option>
    </select>
    &nbsp;
    <select name='List3' onchange="getValue(this.value)">
    <option selected >Select Resort</option>
    </select>
    </form>

    </body>
    </html>

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,928
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    This was only an example, and in any case the case is not quite the same as yours. If you had used the original script at
    http://www.javascriptkit.com/script/...plecombo.shtml
    you would have been better off in this instance.

    You need to change List3 to:-

    Code:
    <select name='List3' onchange="getValue(this.value, this.form['List2'].value, 
    this.form['List1'].value)">
    and the function getValue() to

    Code:
    function getValue(L3, L2, L1) {
    alert("Your selection was:- \n" + L1 + "\n" + L2 + "\n" + L3);
    }
    You now have the values of the three select lists. You will need to develop a function which takes these values as inputs and calculates a price accordingly. Or is it as simple as for Resort X the airport transfer price is $y? In that case what you already had (the final resort selection) would be sufficient.


    BTW, the time to say "thanks" is afterwards, not beforehand which gives the - doubtless unintended - impression that you take other people's voluntary unpaid assistance and expertise for granted. Or as British politician Neil Kinnock put it, "Don't belch before you have had the meal." Prefer to use "please" beforehand and if you find a response helpful then you can use the green "Thank User For This Post" button.

    I see that you have double-posted this at Drop Down Box Returning a price and so wasted my time. Please read the forum rules and posting guidelines.



    "Never attribute to malice that which can be adequately explained by stupidity." - Napoleon Bonaparte
    Last edited by Philip M; 04-02-2011 at 08:29 AM.

  • Users who have thanked Philip M for this post:

    Dennis626 (04-03-2011)

  • #5
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Hi Philip
    Sincere apology for all the hassle. Being totally new to HTML , understanding the code is like for me to try to read an english paper only knowing a few word, so your answer has been really helpful.
    Denis

  • #6
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    9
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Duplicating another set of the triple drop down menu

    Dear Philip,

    Your script is amazing... I am using it. But are you able to teach how am I suppose to have another few more sets of that? (I am actually using this script for online tshirt where this script enables customers to order few items)

    Hence i need to duplicate a few of the dropdowns.



    Cheers,
    Steven.
    Last edited by creativ3; 07-11-2011 at 06:26 AM.

  • #7
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi Philip

    Great script. I would like to allow multiple selection to all lists but not quite sure where to start. Can you help?
    Many thanks in advance.

    Vicky

  • #8
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,928
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Quote Originally Posted by vsslam View Post
    Hi Philip

    Great script. I would like to allow multiple selection to all lists but not quite sure where to start. Can you help?
    Many thanks in advance.

    Vicky
    Sorry, The script does not lend itself to that. Each option in the select lists is a separate single selection.

    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.

  • #9
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,505
    Thanks
    3
    Thanked 501 Times in 488 Posts
    Code:
    <html>
    <head>
    
    <script type="text/javascript">
    
    var categories = [];
    categories["startList"] = ["Spain","France","Turkey","Greece"]
    categories["Spain"] = ["Alicante","Barcelona","Malaga"];
    categories["France"] = ["Paris","NIce","Lyon"];
    categories["Turkey"] = ["Dalaman","Antalya","Bodrum"];
    categories["Greece"] = ["Athens","Rhodes","Zante"];
    categories["Alicante"] = ["Benidorm","El Abir","Finestra"];
    categories["Barcelona"] = ["Lloret","Santa Suzanna","La Pineda"];
    categories["Malaga"] = ["Puerto Banus","Fuengirola","Benalmadena"];
    categories["Paris"] = ["Paris","Disneyland","Orly"];
    categories["Nice"] = ["Nice","Monaco","Cannes"];
    categories["Lyon"] = ["A","B","C"];
    categories["Dalaman"] = ["A","B","C"];
    categories["Antalya"] = ["d","e","f"];
    categories["Bodrum"] = ["g","h","i"];
    categories["Athens"] = ["1","2","3"];
    categories["Rhodes"] = ["1a","2b","3c"];
    categories["Zante"] = ["V","Y","A"];
    
    var myarray = [];
    myarray["startList2"] = ["Spain2","France2","Turkey2","Greece2"]
    myarray["Spain2"] = ["Alicante2","Barcelona2","Malaga2"];
    myarray["France2"] = ["Paris2","NIce2","Lyon2"];
    myarray["Turkey2"] = ["Dalaman2","Antalya2","Bodrum2"];
    myarray["Greece2"] = ["Athens2","Rhodes2","Zante2"];
    myarray["Alicante2"] = ["Benidorm2","El Abir2","Finestra2"];
    myarray["Barcelona2"] = ["Lloret2","Santa Suzanna2","La Pineda2"];
    myarray["Malaga2"] = ["Puerto Banus2","Fuengirola2","Benalmadena2"];
    myarray["Paris2"] = ["Paris2","Disneyland2","Orly2"];
    myarray["Nice2"] = ["Nice2","Monaco2","Cannes2"];
    myarray["Lyon2"] = ["A2","B2","C2"];
    myarray["Dalaman2"] = ["A2","B2","C2"];
    myarray["Antalya2"] = ["d2","e2","f2"];
    myarray["Bodrum2"] = ["g2","h2","i2"];
    myarray["Athens2"] = ["12","22","32"];
    myarray["Rhodes2"] = ["1a2","2b2","3c2"];
    myarray["Zante2"] = ["V2","Y2","A2"];
    
    
    function fillSelect(sel,ary,nxt){
     if (ary&&sel.form){
      var frm=sel.form,nme=sel.name.replace(/\d/g,""),i=Number(sel.name.replace(/\D/g,""))+1,nxt=frm[nxt],z0=0;
      while (frm[nme+i]){
       frm[nme+i].length = 1;
       frm[nme+i].selectedIndex=0;
       i++;
      }
      for (;z0<ary.length;z0++){
       nxt.options[z0+1]=new Option(ary[z0],ary[z0]);
      }
      nxt.selectedIndex=0;
     }
    }
    
    function getValue(isValue) {
     alert(isValue);
    }
    
    function init() {
     fillSelect(document.forms[0]['List1'],categories['startList'],'List1')
     fillSelect(document.forms[0]['sel1'],myarray['startList2'],'sel1')
    }
    
    navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', init, false) : addEventListener('load', init, false);
    
    </script>
    </head>
    
    <body>
    <form action="">
    <select name='List1' onchange="fillSelect(this,categories[this.value],'List2')">
    <option selected>Select Country</option>
    </select>
    &nbsp;
    <select name='List2' onchange="fillSelect(this,categories[this.value],'List3')">
    <option selected>Select Airport</option>
    </select>
    &nbsp;
    <select name='List3' onchange="getValue(this.value)">
    <option selected >Select Resort</option>
    </select>
    <br />
    <br />
    
    <select name='sel1' onchange="fillSelect(this,myarray[this.value],'sel2')">
    <option selected>Select Country</option>
    </select>
    &nbsp;
    <select name='sel2' onchange="fillSelect(this,myarray[this.value],'sel3')">
    <option selected>Select Airport</option>
    </select>
    &nbsp;
    <select name='sel3' onchange="getValue(this.value)">
    <option selected >Select Resort</option>
    </select>
    </form>
    
    
    </body>
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #10
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,928
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Oh, I did not understand that was what he meant by "multiple". That is really just the same code repeated x times. Is the idea "First Choice" and "Second Choice"?


    categories["France"] = ["Paris","NIce","Lyon"];

    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.

  • #11
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,505
    Thanks
    3
    Thanked 501 Times in 488 Posts
    That is really just the same code repeated x times
    the code has not been repeated it has been changed to allow different series of select names to use the same function.

    the same array could be used if required
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #12
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,928
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Quote Originally Posted by vwphillips View Post
    the code has not been repeated it has been changed to allow different series of select names to use the same function.

    the same array could be used if required
    Yes, I did not express myself clearly. I failed to understand that vsslam wanted two sets of select lists. Which he could have achieved - albeit inefficiently - by repeating the code twice (renaming form elements and variables etc.)

    An improvement would be

    <select name='List3' onchange="getValue('First Choice', this.value, this.form['List1'].value)">
    <select name='sel3' onchange="getValue('Second Choice', this.value, this.form['sel1'].value)">

    and then

    function getValue(choice, isValue, country) {
    alert (choice + ":- " + country + " " + isValue);
    }

    displaying First Choice:- France Disneyland or whatever.

    Edit: A revised, extended and improved script incorporating vic phillips' and other suggestions may be found at

    Multi Combo Tripleplay Select Lists - improved/extended


    Last edited by Philip M; 11-25-2012 at 02:22 PM.

    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.

  • #13
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,505
    Thanks
    3
    Thanked 501 Times in 488 Posts
    then you could only have one array for the categories
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #14
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi Philip and Vic

    Actually what I want to do is to be able to select Spain and France (multiple selection) at the same time in 1 dropdown list and have the airports of both countries listed in the next dropdown list...

    -vsslam

  • #15
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,928
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Quote Originally Posted by vsslam View Post
    Hi Philip and Vic

    Actually what I want to do is to be able to select Spain and France (multiple selection) at the same time in 1 dropdown list and have the airports of both countries listed in the next dropdown list...

    -vsslam
    So I did understand "multiple" correctly!

    As I said,"Sorry, The script does not lend itself to that. Each option in the select lists is a separate single selection".

    You might offer option choices
    France Only
    Spain Only
    Both France and Spain

    and show the airports as appropriate.
    Last edited by Philip M; 11-26-2012 at 11:17 AM.

    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.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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