jQuery / JavaScript - Change image in another div based on select option

Question

I have created a select option:

<select>
    <option value="samsung">Samsung</option>
    <option value="apple">Apple</option>
    <option value="lg">LG</option>
    <option value="htc">HTC</option>
</select>

Later in the code, I have:

<div class="col-lg-6 text-center"> <!-- bootstrap stuff -->
    <img id="changePictureYo" src="Slike/uredjajS1.png"/>
</div>

I want the img src to change depending on the selected option. (So if I select Apple, the img src would change to Slike/iphone.png).
I have tried this:

<select>
    <option value="samsung">Samsung</option>
    <option value="apple" onselect="changeImage()">Apple</option>
    <option value="lg">LG</option>
    <option value="htc">HTC</option>
</select>

And in my .js file:

function changeImage() {
    document.getElementById("changePictureYo").src = "Slike/iphone.png";
}

But it is not working. What am I missing?

R3tep · Accepted Answer · 2016-12-01 12:35:19Z

4

The event onSelect is not supported by the <option> tag

The select event only fires when text inside a text input or textarea is selected. The event is fired after the text has been selected.

You need to use onChange event.

<select onchange="changeImage(this)">
  <option value="samsung">Samsung</option>
  <option value="apple">Apple</option>
  <option value="lg">LG</option>
  <option value="htc">HTC</option>
</select>

JS :

function changeImage(el) {
  if (el.value == "apple") {
    document.getElementById("changePictureYo").src = "Slike/iphone.png";
  }
}

edited Dec 1, 2016 at 12:35

answered Dec 1, 2016 at 12:28

R3tep

12.9k10 gold badges53 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

IkePr Over a year ago

Thank you so much R3tep ! :-)

Yulia T. · Accepted Answer · 2016-12-01 14:09:02Z

0

Try this

<select id="img_change">
<option value="samsung">Samsung</option>
<option value="iphone">Apple</option>
<option value="lg">LG</option>
<option value="htc">HTC</option>

<div class="col-lg-6 text-center"> <!-- bootstrap stuff -->
<img id="changePictureYo" src=""/>

** jQuery code **

jQuery(document).ready(function($){

$('#img_change').on('change', function(){

        var img_path = 'someDir/' + $(this).val() + '.jpg';
        $('#changePictureYo').attr( 'src', img_path );
});

});

answered Dec 1, 2016 at 14:09

Yulia T.

1513 bronze badges

Collectives™ on Stack Overflow

jQuery / JavaScript - Change image in another div based on select option

2 Answers 2

1 Comment

Try this

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Try this

Comments

Your Answer

Sign up or log in

Post as a guest

Related