Populate 5 select boxes with AJAX

JavaScript
1

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?

2

Sure it’s possible. Are you asking how to achieve redirecting to a new page? This can be done using JavaScript in the HTML onchange attribute of the select tag.

For example…
<select id=“dropdown” onchange=“window.location.href=example.html”>
<option …

3

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:

25_black
25_pink
50_black
75_red

there are total 6 dropdowns so in reality it will be more like this:
25_black_xyz_fish_male
25_black_xyz_fish_female
25_black_xxx_fish_male
25_black_xxx_fish_female
25_black_xxx_pig_male
25_black_xxx_pig_female
etc…