CODEWITHSUNDEEP
jqueryjquery-load
Alberto
Alberto

Reputation: 313

jQuery Load image on select option

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!!

Upvotes: 1

Views: 2977

Answers (1)

Nick Craver
Nick Craver

Reputation: 630379

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).

Upvotes: 1

Related Questions