Recursive Drop Down Image Selection?

I'm trying to create a product page layout that al开发者_开发问答lows a customization of a product. Basically, a series of drop downs with each successive drop down populated with options based on what has been selected so far. So like this:

Drop down 1: Product Variant (user selects productvariationb, drop down 2 then is populated with options for productvariationb).

Drop down 2: Product color (user selected productvariationb in drop down 1, now that they select "brown" in drop down 2 the image should change to a brown version of productvariation b).

And so on, with the image changing (and options populating) each time according to what has been selected.

Can I do this with JS and does anyone know of a script similar that I can edit, or what functions of JS I need to look into to accomplish this?

Here I made you this : http://jsfiddle.net/moeishaa/H9fF2/

It is working with jQuery. Play with it and let me know if this helped :-)

I know it looks very static but you can render the drop-down on page load and populate the options object as well. I am sure you can find plug in and add-ons. This is a very short amount of code and can be customized.

I think the best resource for example code would be looking at some JavaScript or JQuery examples on creating expandable menus (more specifically ones that mimic folder structures). They usually operate by decorating an unordered list.

You could create a static unordered list and have the image change based on what item you are hovering over. Alternatively, you could use some AJAX to dynamically populate additional parts of the list as you hover over different levels. Both of those would most likely be easily accomplished with JQuery. Here's a page with some menu examples that might give you some ideas:

JQuery Navigation Menus