Changing image based on selection in 2 dropdowns
<p>I have two <code>select</code> elements:</p>

<pre class="lang-html prettyprint-override"><code>&lt;select class="form-control" id="shape" name="shape"&gt;
  &lt;option value="a"&gt;a&lt;/option&gt;
  &lt;option value="b"&gt;b&lt;/option&gt;
  &lt;option value="c"&gt;c&lt;/option&gt;
  &lt;option value="d"&gt;d&lt;/option&gt;
  &lt;option value="e"&gt;e&lt;/option&gt;
  &lt;option value="f"&gt;f&lt;/option&gt;
&lt;/select&gt;
</code></pre>



<p>The second one shows the sub categories of the first:</p>

<pre class="lang-html prettyprint-override"><code>&lt;select class="form-control" id="waist" name="waist"&gt;
  &lt;option value="1"&gt;1&lt;/option&gt;
  &lt;option value="2"&gt;2&lt;/option&gt;
  &lt;option value="3"&gt;3&lt;/option&gt;
&lt;/select&gt;
</code></pre>

<p>These are part of a <code>form</code> that is used for other operations and names and values of these can be changed.</p>

<p>In my database I have images of <code>a-1</code>, <code>a-2</code>, <code>a-3</code>, <code>b-1</code>, <code>b-2</code>, <code>b-3</code>, <code>c-1</code>, <code>c-2</code>, <code>c-3</code> and so on. I have a space for images which should be updated once options have been chosen from both <code>select</code> elements. </p>

<p>I have read many forms but they used only one dropdown. I am bit new in javascript so can anybody help with this? You can use PHP if you want.</p>