Question

I’m trying to create a product page layout that allows 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?

Answer 1

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.