Pre-load page elements using JS

We have a custom page on our website that using the Jquery Load function to extract dynamic select boxes from another part of the site. The way that it works is like this: Select boxes are generated using Jquery Load. They come in pairs. The choices on select box 1 changes what is in select box 2. When the user makes the choice in select box 1, we are using AJAX to pull the available options for select box 2 based on the choice from select box 1. When the user makes the choice in select box 1, it creates a "loading" animation before the second select box is rendered. This has to happen for each and every select box on the page, and on some pages there can be several select boxes, which makes the process seem a little chore like. What we would like to see is when the page is loaded, all of the possible choices are loaded with the page so that when the user makes the select box choices, there is no loading animation, and the options are already right there. This will also thwart most AJAX errors that can arise when the user starts too soon making the selections, etc. I understand that this will create additional overhead on the page load time, and that is a fair trade. We could easily implement an overlay with a loading animation while the ajax calls are being made to render all of the select boxes. I hope this is clear. Please let me know if I can clarify further.