Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>If you know the prices of your items then you could use <a href="http://api.jquery.com/data/" rel="nofollow">data-attributes</a> to attach them to your options and then access them using jQuery. Here's a working fiddle: <a href="http://jsfiddle.net/PM6qu/" rel="nofollow">http://jsfiddle.net/PM6qu/</a></p> <pre><code>&lt;label&gt;Stone&lt;/label&gt; &lt;select id="stone"&gt; &lt;option value="aquamarine" data-stone-price = "2"&gt;Aquamarine&lt;/option&gt; &lt;option value="pink-topaz" data-stone-price = "3"&gt;Pink Topaz&lt;/option&gt; &lt;option value="tourmaline" data-stone-price = "4"&gt;Tourmaline&lt;/option&gt; &lt;/select&gt; &lt;label&gt;Metal&lt;/label&gt; &lt;select id="metal"&gt; &lt;option value="silver" data-metal-price = "2"&gt;Silver&lt;/option&gt; &lt;option value="platinum" data-metal-price = "4"&gt;Platinum&lt;/option&gt; &lt;option value="white-gold" data-metal-price = "3"&gt;White Gold&lt;/option&gt; &lt;option value="yellow-gold" data-metal-price = "3"&gt;Yellow Gold&lt;/option&gt; &lt;option value="rose-gold" data-metal-price = "3"&gt;Rose Gold&lt;/option&gt; &lt;/select&gt; &lt;img src="path/to/image/silver_aquamarine.jpg" id="imageToSwap"&gt; &lt;div id="price"&gt;&lt;/div&gt; </code></pre> <p>Accessing data atributes: </p> <pre><code>$('#stone, #metal').on('change', function() { $('#imageToSwap').prop('src', ['path/to/image/', $('#metal').val(), '_', $('#stone').val(), '.jpg'].join('') ); alert($('#stone option:selected').data('stone-price') + $('#metal option:selected').data('metal-price')); }); </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload