title: Populating drop down with json object
body: <p>I have managed to populate my drop down menu with a json object, which worked fine. 
  Currently I am trying to display an image which is in a hidden div based on an option selected from the drop down. As the drop down is populated by the json object how would I retrieve the image data. </p>
  
  <p><strong>Html</strong></p>
  
  <pre><code>&lt;form&gt;
      &lt;fieldset id="autoHeight"&gt;
          &lt;legend&gt;pod&lt;/legend&gt;
          &lt;h2&gt;Cars&lt;/h2&gt;
          &lt;select name="drop_down" id="dropDownCars"&gt;
              &lt;option value="None" selected="Selected"&gt;Select type&lt;/option&gt;
          &lt;/select&gt;
      &lt;/fieldset&gt;
  &lt;/form&gt;
  &lt;div id="showBmw" class="hidden"&gt;
      &lt;a href="http://cdn.iphoneincanada.ca/wp-content/uploads/2012/08/white-bmw.jpg"&gt;&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>JSON File</strong></p>
  
  <pre><code>{
      Cars: [{
          "CarType": "BMW",
          "carID": "bmw123"
      }, {
          "CarType": "mercedes",
          "carID": "merc123"
      }, {
          "CarType": "volvo",
          "carID": "vol123r"
      }, {
          "CarType": "ford",
          "carID": "ford123"
      }]
  }
  </code></pre>
  
  <p>This is how I populate the dropdown menu using jquery.</p>
  
  <pre><code>$(document).ready(function() {
      $.getJSON("../cars.json", function(obj) {
          $.each(obj.cars, function(key, value) {
              $("#dropDownCars").append("&lt;option&gt;" + value.carsName + "&lt;/option&gt;");
          });
      });
  });
  </code></pre>
  
  <p>Any working example in jfiddle, would be very much appreciated! Thanks.</p>