I have a product select page that is really slow to use because 6 dropdowns must be populated and the page reloads after selecting each box, to get the options for the next box.
I want to speed it up as follows:
1) User selects one of 50 products from a dropdown list.
2) Page reloads, and all the possible options for the remaining 5 dropdown boxes are now populated (ie. list options all stored client side)
3) User can freely input the remaining 5 dropdowns without the page reloading.
When the page re-loads the first time, have it also load the information for the secondary drop-downs, and make them hidden, or store them as an object. Create a js function to switch the options in the dropdown accordingly, using the data for the secondary drop-downs that was loaded. You could also do this to eliminate the first re-load as well.
OK, but another problem I didnt explain before is that the value of each box depends on the previous one.
In the case above, ABC 025mm only has one option in box 3 (black) whereas ABC 050mm has black and pink as options. So I am not sure how to handle that, it gets complex when you have a total of 6 dropdowns.