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 1 of 1
  1. #1
    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

    Multi Combo Tripleplay Select Lists - improved/extended

    This is an improved/extended version of the Multi-Combo Tripleplay script, allowing for multiple (possibly different) select lists.
    This example offers the user three choices for Country/Airport/Resort, with 3 preferences, the next selects being shown when the previous choices have been made. Various errors are trapped.

    Code:
    <html>
    <head>
    
    <script type="text/javascript">
    
    // by Philip M with suggestions by vic phillips.   The three lists can be different
    
    var categories1 = [];
    categories1["startList1"] = ["Spain","France","Turkey","Greece"]
    categories1["Spain"] = ["Alicante","Barcelona","Malaga"];
    categories1["France"] = ["Paris","Nice","Lyon"];
    categories1["Turkey"] = ["Dalaman","Antalya","Bodrum"];
    categories1["Greece"] = ["Athens","Rhodes","Zante"];
    categories1["Alicante"] = ["Benidorm","El Abir","Finestra"];
    categories1["Barcelona"] = ["Lloret","Santa Suzanna","La Pineda"];
    categories1["Malaga"] = ["Puerto Banus","Fuengirola","Benalmadena"];
    categories1["Paris"] = ["Paris","Disneyland","Orly"];
    categories1["Nice"] = ["Nice","Monaco","Cannes"];
    categories1["Lyon"] = ["A","B","C"];
    categories1["Dalaman"] = ["X","Y","Z"];
    categories1["Antalya"] = ["D","E","F"];
    categories1["Bodrum"] = ["G","H","J"];
    categories1["Athens"] = ["K","L","M", "N"];
    categories1["Rhodes"] = ["P","Q","R"];
    categories1["Zante"] = ["S","T","U"];
    
    var categories2 = [];
    categories2["startList2"] = ["Spain","France","Turkey","Greece"]
    categories2["Spain"] = ["Alicante","Barcelona","Malaga"];
    categories2["France"] = ["Paris","Nice","Lyon"];
    categories2["Turkey"] = ["Dalaman","Antalya","Bodrum"];
    categories2["Greece"] = ["Athens","Rhodes","Zante"];
    categories2["Alicante"] = ["Benidorm","El Abir","Finestra"];
    categories2["Barcelona"] = ["Lloret","Santa Suzanna","La Pineda"];
    categories2["Malaga"] = ["Puerto Banus","Fuengirola","Benalmadena"];
    categories2["Paris"] = ["Paris","Disneyland","Orly"];
    categories2["Nice"] = ["Nice","Monaco","Cannes"];
    categories2["Lyon"] = ["A","B","C"];
    categories2["Dalaman"] = ["X","Y","Z"];
    categories2["Antalya"] = ["D","E","F"];
    categories2["Bodrum"] = ["G","H","J"];
    categories2["Athens"] = ["K","L","M", "N"];
    categories2["Rhodes"] = ["P","Q","R"];
    categories2["Zante"] = ["S","T","U"];
    
    var categories3 = [];
    categories3["startList3"] = ["Spain","France","Turkey","Greece"]
    categories3["Spain"] = ["Alicante","Barcelona","Malaga"];
    categories3["France"] = ["Paris","Nice","Lyon"];
    categories3["Turkey"] = ["Dalaman","Antalya","Bodrum"];
    categories3["Greece"] = ["Athens","Rhodes","Zante"];
    categories3["Alicante"] = ["Benidorm","El Abir","Finestra"];
    categories3["Barcelona"] = ["Lloret","Santa Suzanna","La Pineda"];
    categories3["Malaga"] = ["Puerto Banus","Fuengirola","Benalmadena"];
    categories3["Paris"] = ["Paris","Disneyland","Orly"];
    categories3["Nice"] = ["Nice","Monaco","Cannes"];
    categories3["Lyon"] = ["A","B","C"];
    categories3["Dalaman"] = ["X","Y","Z"];
    categories3["Antalya"] = ["D","E","F"];
    categories3["Bodrum"] = ["G","H","J"];
    categories3["Athens"] = ["K","L","M","N"];
    categories3["Rhodes"] = ["P","Q","R"];
    categories3["Zante"] = ["S","T","U"];
    
    
    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];
    
    while (frm[nme+i]) {
    frm[nme+i].length = 1;
    frm[nme+i].selectedIndex = 0;
    i++;
    }
    
    for (var k = 0; k < ary.length; k++)  {
    nxt.options[k+1] = new Option(ary[k],ary[k]);
    }
    nxt.selectedIndex = 0;
    }
    }
    
    function shownext(which) {  // show next selects
    document.getElementById(which).style.display="block";
    }
    
    var finalDest= ["*", "**", "***"];
    function getValue(choice, isValue, country, airport) {
    if (choice == "First Choice") {finalDest[0] = isValue}
    if (choice == "Second Choice") {finalDest[1] = isValue}
    if (choice == "Third Choice") {finalDest[2] = isValue}
    if ((finalDest[0] == finalDest[1]) || (finalDest[0]==finalDest[2]) || (finalDest[1] == finalDest[2])) {
    alert ("You have chosen the same destination twice!  \nPlease revise your selection(s)");
    return false;
    }
    
    if (country == "" || airport == "") {
    alert ("Please select a country, airport and resort");
    return false
    }
    
    alert (choice + ":-  " + country +  "  " + airport + "  "  + isValue);
    }
    
    function init() {
    fillSelect(document.getElementById("firstList1"),categories1['startList1'],'firstList1');
    fillSelect(document.getElementById("secondList1"),categories2['startList2'],'secondList1');
    fillSelect(document.getElementById("thirdList1"),categories3['startList3'],'thirdList1');
    }
    
    navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', init, false) : addEventListener('load', init, false);
    
    </script>
    </head>
    
    <body>
    <form id = "myform" action="">
    FIRST CHOICE 
    <br><br>
    <select name='firstList1' id = 'firstList1' onchange="fillSelect(this,categories1[this.value],'firstList2')">
    <option selected>Select Country</option>
    </select>
    &nbsp;&nbsp;
    <select name='firstList2' id = 'firstList2' onchange="fillSelect(this,categories1[this.value],'firstList3')">
    <option selected>Select Airport</option>
    </select>
    &nbsp;&nbsp;
    <select name='firstList3' id = 'firstList3' onchange="getValue('First Choice', this.value,  this.form['firstList1'].value, this.form['firstList2'].value); shownext('choice2')">
    <option selected >Select Resort</option>
    </select>
    <br>
    <br>
    <br>
    <br>
    
    <div id = "choice2" style="display:none" >
    
    SECOND CHOICE 
    <br><br>
    <select name='secondList1' id = 'secondList1' onchange="fillSelect(this,categories2[this.value],'secondList2')">
    <option selected>Select Country</option>
    </select>
    &nbsp;&nbsp;
    <select name='secondList2' id = 'secondList2' onchange="fillSelect(this,categories2[this.value],'secondList3')">
    <option selected>Select Airport</option>
    </select>
    &nbsp;&nbsp;
    <select name='secondList3' id = 'secondList3' onchange="getValue('Second Choice',this.value, this.form['secondList1'].value,this.form['secondList2'].value); shownext('choice3')">
    <option selected >Select Resort</option>
    </select>
    <br>
    <br>
    <br>
    <br>
    </div>
    
    <div id = "choice3" style="display:none">
    THIRD CHOICE 
    <br><br> 
    <select name='thirdList1' id = 'thirdList1' onchange="fillSelect(this,categories3[this.value],'thirdList2')">
    <option selected>Select Country</option>
    </select>
    &nbsp;&nbsp;
    <select name='thirdList2' id = 'thirdList2' onchange="fillSelect(this,categories3[this.value],'thirdList3')">
    <option selected>Select Airport</option>
    </select>
    &nbsp;&nbsp;
    <select name='thirdList3' id = 'thirdList3' onchange="getValue('Third Choice',this.value, this.form['thirdList1'].value,this.form['thirdList2'].value)">
    <option selected >Select Resort</option>
    </select>
    </div>
    
    </form>
    
    
    </body>
    </html>
    Last edited by Philip M; 11-26-2012 at 07:47 AM. Reason: Typo noticed

    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.


 

Posting Permissions

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