JavaScript: Load Image based on Select Option (Dropdown)

by Yang Yang on December 25, 2011

It’s not unusual to respond to the user actions by dynamically modifying some content of the page. For example, you can employ JavaScript to change and load another image based on the <select></select> option the user has just selected.

This is the snippet you need:

<select onChange="getElementById('front_image').src='/images/'+this.value+'.jpg';">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>
<img src="/images/1.jpg" id="front_image" />

Assuming you store all the images in the /images/ directory.

You get the idea.

abilify reviews depression January 13, 2012 at 1:31 am

Cool story!

Comments on this entry are closed.

Previous post:

Next post: