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.
Is there any way to achieve this?
<select id="dropdown" onchange="window.location.href=example.html">
I am asking how to cache all the options of the dropdown boxes on the client side, baring in mind that the options of boxes depend on their parents.
ie. box 3 (color) options depend on box 2 (size).
e.g. Product "ABC" in size "25mm" has color options "black" and "pink", but Product "ABC" in size "50mm" has color option "black" only.
In this case, I guess the data has to be cached something like this:
there are total 6 dropdowns so in reality it will be more like this: