Javascript Cascading Drop Down Menu With 4 Hierarchical Boxes
Hey, so I'm a complete javascript newbie and am trying to create a drop down menu with four different boxes. The site I'm working on is basically an ecommerce site, so I'll use cars as a good example for what I want to do.
Let's say that I'm selling cars and want to target the buyer directly, then I would have the following boxes, each one serving as a dependent of the one before it:
1. Pick the brand (BMW, Mercedes, Etc.)
2. Pick the type of car (Sports car, SUV, Mini Van, etc.)
3. Pick the color (blue, green, etc.)
4. Pick the price ($0-$19,999/$19,999-29,999/etc.)
So far I have the first two boxes down by using the following site: http://www.supertom.com/menugen/. Now my problem is that the site only allows for the first two boxes to be made, and says that
"the values in box1 are static and printed directly as normal HTML. The corresponding box2 options will also be copied into the HTML as well as the javascript for full functionality."
Being a complete newbie, I have no idea what this means. So I decided to search the internet for an answer and was not able to find one, thus leading me here, which from the looks of it seems like a great forum.
If anyone could tell me how to connect a third and fourth box that falls into the same hierarchy as the first and the second then I would appreciate.
Really THANK YOU, and I'm really looking forward to reading your replies!!
<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.
Thanks for this code, I spend day looking for this. I have amended it for the purpose of proposing airport transfer on a web site. so it show
Country/Airport/Resort ( e.g USA->JFK-> New York City )
Do you know what code can I used for selected route to return a price
e.g JFK to New York 50USD .
Below is your code that I have used
Thanks in advance Philip
<html>
<head>
<script type="text/javascript">
var categories = [];categories["startList"] = ["Spain","France","Turkey","Greece"]
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'])
}
This was only an example, and in any case the case is not quite the same as yours. If you had used the original script at http://www.javascriptkit.com/script/...plecombo.shtml
you would have been better off in this instance.
You now have the values of the three select lists. You will need to develop a function which takes these values as inputs and calculates a price accordingly. Or is it as simple as for Resort X the airport transfer price is $y? In that case what you already had (the final resort selection) would be sufficient.
BTW, the time to say "thanks" is afterwards, not beforehand which gives the - doubtless unintended - impression that you take other people's voluntary unpaid assistance and expertise for granted. Or as British politician Neil Kinnock put it, "Don't belch before you have had the meal." Prefer to use "please" beforehand and if you find a response helpful then you can use the green "Thank User For This Post" button.
Hi Philip
Sincere apology for all the hassle. Being totally new to HTML , understanding the code is like for me to try to read an english paper only knowing a few word, so your answer has been really helpful.
Denis
Duplicating another set of the triple drop down menu
Dear Philip,
Your script is amazing... I am using it. But are you able to teach how am I suppose to have another few more sets of that? (I am actually using this script for online tshirt where this script enables customers to order few items)
Oh, I did not understand that was what he meant by "multiple". That is really just the same code repeated x times. Is the idea "First Choice" and "Second Choice"?
categories["France"] = ["Paris","NIce","Lyon"];
__________________
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.
the code has not been repeated it has been changed to allow different series of select names to use the same function.
the same array could be used if required
Yes, I did not express myself clearly. I failed to understand that vsslam wanted two sets of select lists. Which he could have achieved - albeit inefficiently - by repeating the code twice (renaming form elements and variables etc.)
Actually what I want to do is to be able to select Spain and France (multiple selection) at the same time in 1 dropdown list and have the airports of both countries listed in the next dropdown list...
Actually what I want to do is to be able to select Spain and France (multiple selection) at the same time in 1 dropdown list and have the airports of both countries listed in the next dropdown list...
-vsslam
So I did understand "multiple" correctly!
As I said,"Sorry, The script does not lend itself to that. Each option in the select lists is a separate single selection".
You might offer option choices
France Only
Spain Only
Both France and Spain
and show the airports as appropriate.
__________________
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: 
Please read the forum rules and posting guidelines.
