title: Changing image based on selection in 2 dropdowns
body: <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>