I have a coding problem here that I can't quite figure out. For a clothing website I need to display stock information for each product related to colours and sizes available.
I'm using a mysql database to store information on what sizes and colours are available. The structure for this is as follows:
`colour_name` e.g. Brown
`size` e.g. M
Might not be the easiest way to describe it, but every product has many colours. Each colour has a record stored in the database for S, M, L sizes and has a boolean field to determine whether or not it is in stock.
On the product page, there is a drop down box for the user to select a colour. When the user selects a colour I need to show relevant radio buttons for the sizes available in that colour. Sizes that are not available show as greyed out (disabled="disabled"). This works absolutely fine when hardcoding the options for just 1 colour.
The issue lies when the user selects a colour, I want the radio buttons to change to reflect the sizes available for the selected colours.
The best way I thought of doing this is on page load, create a hidden div for each possible colour and fill them with the right radio buttons code. When the select drop down for colour is changed, make the correct div visible.
e.g. colour1 is selected so make the colour1 div visible which contains the right size stock information.
Does this make sense? I am very grateful for your help and suggestions.