Multi Combo Tripleplay Select Lists - improved/extended

Philip M · 11-25-2012, 02:08 PM

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>