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

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

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

试试这个
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());
}

红色
黑色
白色
$（文档）.ready（函数（）{
$（'.image swap'）.attr（“src”，$（'#kitchen_color'）.val（））；
})
函数更改_image（）{
$（'.image swap'）.attr（“src”，$（'#kitchen_color'）.val（））；
}

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

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

---

使用上述代码。

您可以将

onchange

事件设置为

选择

<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" />  

示例
你自己试过吗？谢谢，太简单了。由于我是jquery的初学者，我觉得很难…谢谢…我如何设置默认映像？我需要选择框中的第一个值作为我的默认图像…@在src中给出值，在选择框的第一个选项中给出相同的值。
<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" />  

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