If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

Enjoy an ad free experience by logging in. Not a member yet? Register.

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:

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.

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

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.

Users who have thanked Philip M for this post:

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)

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.)