Best design to show the price for different combination
<p>I have an ecommerce site and a product can have three variants. This is what I have</p>

<pre><code>color | size   | material | price
blue  | medium | leather  | $21.00
blue  | large  | leather  | $27.00
blue  | large  | cotton   | $47.00
white | large  | cotton   | $57.00
</code></pre>

<p>On the browser I have three drop downs:</p>

<pre><code>color   : blue/white
size    : medium/large
material: leather/cotton
</code></pre>

<p>When buyer changes an option then I need to show updated price.</p>

<p>On server side I would have done a database query to get the price. On browser I have to use JavaScript to get the price. What is the best way to accomplish it.</p>

<p>One solution was to keep a giant hash in Javascript</p>

<pre><code>{"blue-medium-leather" : 21.00}
</code></pre>

<p>This strategy will work. However I am wondering if there is a better solution in JavaScript that I am not aware of.</p>
