Categories
Kavoir & Whatever

JavaScript: Load Image based on Select Option (Dropdown)

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.

By Yang Yang

Hello, I'm Yang. I build online businesses that please people. Want to join in and post some useful articles on Kavoir.com? Shoot me a message.

1 reply on “JavaScript: Load Image based on Select Option (Dropdown)”

Comments are closed.