filter - Javascript item selector -

i'm trying create kind of item selector using javascript. selector similar setup below:

<label>stone</label> <select id="stone">   <option value="aquamarine">aquamarine</option>   <option value="pink-topaz">pink topaz</option>   <option value="tourmaline">tourmaline</option> </select> <label>metal</label> <select id="metal">   <option value="silver">silver</option>   <option value="platinum">platinum</option>   <option value="white-gold">white gold</option>   <option value="yellow-gold">yellow gold</option>   <option value="rose-gold">rose gold</option> </select> 

with image container so:

<img src="path/to/image/silver_aquamarine.jpg" id="imagetoswap"> 

and javascript follows:

$('#stone, #metal').on('change', function() {   $('#imagetoswap').prop('src', ['path/to/image/', $('#metal').val(), '_',     $('#stone').val(), '.jpg'].join('')       ); }); 

and working fine. i'm wondering (and apologies in advance having no idea how approach this) there way pull in other values associated image. example, can bring in price associated selection?

or, should approaching in entirely different way? maybe array of items, each image, price, stone , metal, shown based on selection using similar filter?

also, i'll need create fallback happens if option doesn't exist. let's combinations exist except aquamarine + rose gold. how add message saying "option doesn't exist"?

any here hugely appreciated.

you set object. looks like:

var details = {     stone: {         aquamarine: 100, // price 100 dollars         "pink-topaz": 75, // price 75 dollars         tourmaline:  88 // , on     },     metal: {         silver: 140,         platinum: 250,         "white-gold": 400,         "yellow-gold": 390,         "rose-gold": 420     } } $('#stone, #metal').on('change', function() {   var metal = $('#metal').val();   var stone = $('#stone').val();   var price = details.metal[metal] + details.stone[stone];    // there no need in using array , joining it.   var src = 'path/to/image/' + metal + '_' + stone + ".jpg";   $(".details").remove();   $('#imagetoswap').prop('src', src);   $("#metal").after('<span class="details"><br/>the price of image ' + price + "</span>"); }); 

see working: http://jsfiddle.net/fltjr/

the thing need figure out price algorithm.