jQuery Load image on select option

Question

Hi Guys, I'm trying to load different images into a DIV according on the selected, something like this:

<select>
  <option value="mercedes">Car #1</option>
  <option value="ferrari">Car #2</option>
  <option value="fiat">Car #3</option>
</select>

If the Car #1 es option is selected, load mercedes.jpg into <div id="car"></div>

Any ideas??

Thanks so much!!

Answer 1

You can use the .change() event handler, like this:

$("select").change(function() {
  $("#car").html($("<img />", { src: $(this).val() + ".jpg" }));
});

When the value changes, this creates a new <img>, sets its source to NEWVALUE.jpg and uses .html() to set #car's content to that element .html(element) is a shortcut for .empty().append(element).