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 2 of 2 FirstFirst 12
Results 16 to 21 of 21
  1. #16
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,496
    Thanks
    3
    Thanked 500 Times in 487 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],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.push(ary[opts[z0].value]);
       }
      }
      if (nxt){
       for (;z1<oary.length;z1++){
        for (z1a=0;z1a<oary[z1].length;z1a++){
         nxt.options[nxt.options.length]=new Option(oary[z1][z1a],oary[z1][z1a]);
        }
       }
       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>
    
    
    </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/

  2. #17
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,898
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    If "Select Country" is included in the selected multiple options then the airports list includes the four countries, and if a country is then selected the airport becomes the resort. e.g. Select Country/Spain > Spain > Barcelona
    Last edited by Philip M; 11-26-2012 at 01:25 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.

  3. #18
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,496
    Thanks
    3
    Thanked 500 Times in 487 Posts
    I have just retested the script and this does not happen for me

    z0=nxt==sel?0:1

    is designed to prevent this occurring
    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/

  4. #19
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,898
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Quote Originally Posted by vwphillips View Post
    I have just retested the script and this does not happen for me

    z0=nxt==sel?0:1

    is designed to prevent this occurring
    Ah! Somehow I left that bit out. Mea culpa!

    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.

  5. #20
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Philip M View Post
    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.
    Hi Phillip,

    The above script is amazing. I am a newbie to javasscript and unable to understand certain parts of the code i.e. "fillSelect" and "init" functions

    Could you please breifly explain what exactly the function is doing in particular the "init" function and the following lines,

    for (i=step; i<nLists+1; i++) {
    document.forms[0]['List'+i].length = 1;
    document.forms[0]['List'+i].selectedIndex = 0;
    }

    Thank you.

    Best Regards
    Shwetha

  6. #21
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,898
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    init() calls on page load the function fillSelect() with two parameters, "StartList" and the name of the first select list, "List1".

    function fillSelect(currCat,currList) { // the two passed parameters
    var step = Number(currList.name.replace(/\D/g,"")); // extract the number at the end of the name of the current list (initially 1)
    alert (step); // add this line to inspect the value of step
    for (i=step; i<nLists+1; i++) { // loop from step to step<number of lists+1 (here 3) - could be for (i=step; i<=nLists; i++)
    document.forms[0]['List'+i].length = 1; // set the length of the next list(s) to 1; // in other words, erase them apart from the first option "Make a selection"
    document.forms[0]['List'+i].selectedIndex = 0; // set the selectedIndex of the next list(s) to 0, that is the option "Make A Selection"
    }

    Rather than use document.forms[0] it would be better to assign an id to the form and then use document.getElementById("formid")


    Hope this helps you.
    Last edited by Philip M; 01-22-2013 at 09:08 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 2 of 2 FirstFirst 12

Posting Permissions

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