Better way to do this with jQuery?

Better way to do this with jQuery?

I started experimenting with jQuery a few weeks ago and haven't really done much with it. Now, I have to code a simple product page which displays a product with variations and allows the user/customer to view the price and availability of the different variations (size/color combinations).

I have a non-jQuery page that I created before that does about what I need, but there is a significant amount of javascript code and I want to see if I can trim it down by rewriting it using jQuery.

The problem is that once I began, I quickly realized that, with the way I was writing it, the code would still be fairly large. I'm wondering if there is better way to do it.
 
First let me explain the basic (simplified) page layout. There are two drop-down select boxes - one for size, one for color. Once the user selects a size, only colors available in that size are shown in the color select options. Once the user selects a color, only sizes available in that color are shown in the size select options. The user can select size and color in either order. Once both a size and color are selected, the price for that item (each size and color combination is a different "item") is shown.
 
To handle showing and hiding the select box options and showing the right price, I maintain all the item information in javascript and feed the information to javascript via PHP when the page loads.
 
Basically, I have a list of items, each with a color, size, and price (available quantity too, but I'll leave that out for now). The way I have it designed right now is that I have:

- a color list, which consists of an array of strings that describe the colors (like "Black")
- a size list, which consists of an array of strings that describe the sizes (like "Large")
- a main item list, which consists of 4 javascript arrays, each with the same number of elements (which is the number of items), one for each: the item identifiers (SKUs or other identification numbers), the prices, the colors, and the sizes (the color and size arrays contain values which are indexes into the color and size lists).

 

I also have two separate 2-dimensional arrays (which I call item/variation tables) built from the main item list.
The first one allows quick determination of whether a specific size/color combination exists (the first index corresponds to the index in the color list and the second index corresponds to the one in the size list, and the final value is boolean, like variationsTable[colorIndex][sizeIndex]=true).
The second is similar except the final value is the SKU of the item if it exists, which allows quick lookup of the SKU based on color and size indices. (This array is used to get the SKU after the user selects an item.)

 

To build the initial lists, I first print out the color and size list array declarations with PHP, and then I have a javascript function that allows adding a single item to the main item list. PHP prints out as many calls to this function as there are items. I then have a function that builds the two "variation tables" from the initial lists by going through each item.

 

 

Now, even not considering the javascript code written by PHP (or the code that actually handles the select box functionality, which will of course be written using jQuery), the source ends up being fairly large, and I suspect that this is due to some flaw in the design. Is there anything that I could do quite differently? Perhaps some jQuery functionality that I didn't think of? Some design alternative? Or is this design ok?