jquery - 根据选择框中的选项值更改图像的 src 值

Question

我有一个 img 标签和一个选择框

<img src="" name="image-swap">

<select name="kitchen_color" id="kitchen_color">
    <option value="/static/imag1.jpg">Red</option>
    <option value="/static/imag2.jpg">Black</option>
    <option value="/static/imag3.jpg">White</option>

</select>

我需要根据选择框值更改img标签的src值。

如果我选择选项 RED，选项 Red(/static/imag1.jpg) 的值应填写图像的 src。

并且还选择第一个选项值作为默认图像。

Answer 1

$(document).ready(function(){
   $("#kitchen_color").change(function(){
     $("img[name=image-swap]").attr("src",$(this).val());

   });

});

使用上面的代码。

Answer 2

在您的选择列表中使用更改功能

$('#kitchen_color').change( function() {    
$("#imgid").attr("src","new src value");
});

Answer 3

您可以将onchange事件设置为select.

<select name="kitchen_color" id="kitchen_color" onchange="setImage(this);">
  <option value="https://www.google.ru/images/srpr/logo4w.png">Google</option>
  <option value="http://yandex.st/www/1.645/yaru/i/logo.png">Yandex</option>
  <option value="http://limg.imgsmail.ru/s/images/logo/logo.v2.png">Mail</option>
</select><br />
<img src="" name="image-swap" />  

Javascript：

function setImage(select){
  var image = document.getElementsByName("image-swap")[0];
  image.src = select.options[select.selectedIndex].value;
}  

那里的例子

Answer 4

try this


<img src="" class="image-swap">

<select name="kitchen_color" id="kitchen_color" onchange="change_image()">
    <option value="/static/imag1.jpg">Red</option>
    <option value="/static/imag2.jpg">Black</option>
    <option value="/static/imag3.jpg">White</option>

</select>


$(document).ready(function(){
    $('.image-swap').attr("src",$('#kitchen_color').val());
})

function change_image(){
    $('.image-swap').attr("src",$('#kitchen_color').val());
}