title: change the src value of an image based on the options value in a select box
body: <p>I have an img tag and a select box</p>
  
  <pre><code>&lt;img src="" name="image-swap"&gt;
  
  &lt;select name="kitchen_color" id="kitchen_color"&gt;
      &lt;option value="/static/imag1.jpg"&gt;Red&lt;/option&gt;
      &lt;option value="/static/imag2.jpg"&gt;Black&lt;/option&gt;
      &lt;option value="/static/imag3.jpg"&gt;White&lt;/option&gt;
  
  &lt;/select&gt;
  </code></pre>
  
  <p>I need to change the src value of the img tag based on the select box value.</p>
  
  <p>If I select the option RED the the value of the option Red(/static/imag1.jpg) should fill in the src of the image.</p>
  
  <p>And also select the first option value as the default image.</p>