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
__________________
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.
<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>
<select name='List2' onchange="fillSelect(this.value,this.form['List3'])">
<option selected>Make a selection</option>
</select>
<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,
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.
__________________
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.
Before you post, read our: 
