Add this to the <head> section of your web page:
First, change the text “your-dropdown-menu-id” in the code above to the ID of your first drop-down menu.
For example, if this is your drop down menu code:
<select name="select_size" id="select_size"> <option value="large">Large</option> <option value="medium">Medium<option> <option value="small">Small</option> </select>
Now, simply either wrap the second drop down menu in a div with the ID “color-options” or add the ID “color-options” to the second drop down menu itself.
For example, let’s say all of the T-shirts you are selling come in one color – black – unless the user is purchasing a size small, in which case they can choose the color blue if they prefer. Here is what the second drop down menu would look like:
<select name="select_color" id="color-options"> <option value="black">Black</option> <option value="blue">Blue<option> </select>
Or, you could wrap the drop down menu in a div with the ID of “color-options”.
To see an example of this code in action, click here.
As you can probably see, there are many different things you can do with this code – such as display different images or different text based on the user’s selection in the first drop down menu. All you have to do is wrap the text or image that you want to be dependent on a user’s selection in the ID “color-options” or whatever you change the ID to.
Let me know if you have any questions!