根据选择框中的选项值更改图像的 src 值答案

【问题标题】：change the src value of an image based on the options value in a select box根据选择框中的选项值更改图像的 src 值
【发布时间】：2013-08-05 09:21:32
【问题描述】：

我有一个 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。

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

【问题讨论】：

你自己试过了吗？

标签： jquery

【解决方案1】：

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

   });

});

使用上面的代码。

【讨论】：

谢谢你这么简单。因为我是 jquery 的初学者，所以我觉得这很困难..谢谢........
如何设置默认图片？我需要选择框中的第一个值作为我的默认图像...
@give src 中的值和选择框第一个选项的值相同。

【解决方案2】：

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

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

【讨论】：

【解决方案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;
}

例如there

【讨论】：

【解决方案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());
}

【讨论】：