jQuery / JavaScript - 根据select选项更改另一个div中的图像

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:

我希望img src根据所选选项进行更改。 （因此，如果我选择Apple，img src将改为Slike / iphone.png）。我试过这个：

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

在我的.js文件中：

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

But it is not working. What am I missing?

但它没有用。我错过了什么？

2 个解决方案

#1

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

标记不支持事件onSelect

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.

select事件仅在选择文本输入或文本区域内的文本时触发。选择文本后会触发该事件。

You need to use onChange event.

您需要使用onChange事件。

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

JS：

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

#2

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代码**

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

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

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

});

}）;