javascript - Changing image based on selection in 2 dropdowns -

i have 2 select elements:

<select class="form-control" id="shape" name="shape">   <option value="a">a</option>   <option value="b">b</option>   <option value="c">c</option>   <option value="d">d</option>   <option value="e">e</option>   <option value="f">f</option> </select> 

the second 1 shows sub categories of first:

<select class="form-control" id="waist" name="waist">   <option value="1">1</option>   <option value="2">2</option>   <option value="3">3</option> </select> 

these part of form used other operations , names , values of these can changed.

in database have images of a-1, a-2, a-3, b-1, b-2, b-3, c-1, c-2, c-3 , on. have space images should updated once options have been chosen both select elements.

i have read many forms used 1 dropdown. bit new in javascript can this? can use php if want.

you need write function called on change event of both select elements concatenates image filename , updates src property of required img, this:

$('select.form-control').change(function() {     var file = $('#shape').val() + '-' + $('#waist').val() + '.jpg';     $('#imgtochange').prop('src', filename); });