Results 1 to 8 of 8

Thread: More levels for chained select menu?

  1. #1
    Join Date
    Nov 2010
    Location
    Belgium
    Posts
    13
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default More levels for chained select menu?

    1) Script Title: Chained Select Menu

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...menu/index.htm

    3) Describe problem: Hello all,
    I was need for my website a selection menu. I was get info to look at this page here
    http://www.dynamicdrive.com/dynamici...menu/index.htm
    This is exactly what I need. Only I want to add more "levels" and don't know how to proceed, because I don't understand JS

    Can someone help me out?

    Thanks
    Last edited by james438; 04-10-2013 at 03:12 PM. Reason: added posting format

  2. #2
    Join Date
    Jan 2011
    Location
    Southeastern CT
    Posts
    596
    Thanks
    43
    Thanked 28 Times in 28 Posts

    Default

    So,are you saying you want to use 4 or 5 dropdowns chained together??
    Thanks,

    Bud

  3. #3
    Join Date
    Nov 2010
    Location
    Belgium
    Posts
    13
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    Hello,

    yes i don't know how much levels i will need. I was hoping to can easy add more levels by adding a simple text in the HTML-code ?!

    Thanks for your help

  4. #4
    Join Date
    Jan 2011
    Location
    Southeastern CT
    Posts
    596
    Thanks
    43
    Thanked 28 Times in 28 Posts

    Default

    I am sure it can be adapted to suit your needs.

    But,without know ing exactly how many levels you are talking about I will be cautious and say that there is more likely is a limit to some degree

    I will presume the more levels you go the more confusing it could get..
    Thanks,

    Bud

  5. #5
    Join Date
    Nov 2010
    Location
    Belgium
    Posts
    13
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    Hello Bud,

    Thanks for your help. I will check how many levels I need and try to keep it small.
    This menu I would like to use it to select a datasheet to download of a product. The selection would be like this: Product -> Serie -> Model -> Size -> Type of datasheet.
    So this are 5 levels. But maybe i will need a 6th one (I not yet finish the final structure of productcatalog)
    If you could help me to modify the script to get 6 levels ... woould be perfect

    Thanks
    Ralph

  6. #6
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,800
    Thanks
    2
    Thanked 421 Times in 415 Posts

    Default

    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],opts=sel.options,oary=[],z0=nxt==sel?0:1,z1=0,z1a;
      while (frm[nme+i]){
       frm[nme+i].length=1;
       frm[nme+i].selectedIndex=0;
       i++;
      }
      for (;z0<opts.length;z0++){
       if (opts[z0].selected&&ary[opts[z0].value]){
        oary=oary.concat(ary[opts[z0].value]);
       }
      }
      if (nxt){
       for (;z1<oary.length;z1++){
        nxt.options[z1+1]=new Option(oary[z1],oary[z1]);
       }
       nxt.selectedIndex=0;
      }
     }
    }
    
    function getValue(isValue) {
     alert(isValue);
    }
    
    function init() {
     fillSelect(document.forms[0]['List1'],categories,'List1')
     fillSelect(document.forms[0]['sel1'],myarray,'sel1')
    }
    
    navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', init, false) : addEventListener('load', init, false);
    
    </script>
    </head>
    
    <body>
    <form action="">
    
    <select name='List1' multiple="multiple" style="height:90px;" >
    <option value="startList" selected>Select Country</option>
    </select>
    <input type="button" name="" value="Go"  onmouseup="fillSelect(this.form['List1'],categories,'List2')"/>
    
    &nbsp;
    <select name='List2' onchange="fillSelect(this,categories,'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,'sel2')">
    <option value="startList2" selected>Select Country</option>
    </select>
    &nbsp;
    <select name='sel2' onchange="fillSelect(this,myarray,'sel3')">
    <option selected>Select Airport</option>
    </select>
    &nbsp;
    <select name='sel3' onchange="getValue(this.value)">
    <option selected >Select Resort</option>
    </select>
    </form>
    
    <script> vic=0; </script>
    <form name=Show id=Show style="position:absolute;visibility:visible;top:700px;left:0px;" >
    <input size=100 name=Show0 >
    <input size=10 name=Show1 >
    <input size=10 name=Show2 >
    <input size=10 name=Show3 >
    <input size=10 name=Show4 >
    <input size=10 name=Show5 >
    <input size=10 name=Show6 >
    <input size=10 name=Show7 >
    <input size=10 name=Show8 >
    <input size=10 name=Show9 ><br>
    <textarea name=TA rows=1 cols=100 ></textarea>
    </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/

  7. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,027
    Thanks
    44
    Thanked 3,210 Times in 3,172 Posts
    Blog Entries
    12

    Default

    I have a new script for this which is ready for wider testing. In it the selects are easy to configure because they are ordinary select elements that you put right on the page. Here's a demo:

    http://home.comcast.net/~jscheuer1/s...madd/demo3.htm

    Use your browser's "View Source" to get the code. The main script can be made external (I will be doing that soon anyway), if you need help with that, or have any other questions, just ask. The source code is well documented though, so you can see what to do. No configuration is done in the main script, all configuration is done in the selects themselves, and in the small calling script at the end of the page. Some CSS style can also be used if desired. The demo does that and it's documented as well.
    Last edited by jscheuer1; 04-11-2013 at 03:56 PM. Reason: add bit about style
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  8. #8
    Join Date
    Nov 2010
    Location
    Belgium
    Posts
    13
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    Thank guy's for your help.
    I was check both solutions. But i'm not yet totaly happy . I liked much the version of Vic, but the problem is that in this script, I need to go till last selection before i get "the answer". In my case, not all selection are from same length - some are finish after the 3rd level and other need all 6 levels. In my basic script (I found here on DD) the levels they are not used are grey and not useable and i could finish after 2nd level (if I need) and after push a button "go" i get my answer.... (I know, i'm not easy )
    So would be very cool and helpful, If someone could help me to extend this script http://www.dynamicdrive.com/dynamici...menu/index.htm to 6 levels.
    Thanks to all they help me

Similar Threads

  1. Chained select menu
    By jackcall in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 10-09-2010, 07:45 AM
  2. chained select menu
    By merong in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 07-08-2009, 04:10 PM
  3. Chained Select Menu Help
    By convoy90 in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 12-05-2008, 01:24 PM
  4. Chained Select Menu
    By toolman in forum Dynamic Drive scripts help
    Replies: 4
    Last Post: 07-24-2005, 06:32 PM

Bookmarks

Posting Permissions

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