JavaScript: Load Image based on Select Option (Dropdown)

• Tweet

• Tweet

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.