根据选择框中的选项值更改图像的src值 [英] change the src value of an image based on the options value in a select box

问题描述

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

I have an img tag and a select box

<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值.

I need to change the src value of the img tag based on the select box value.

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

If I select the option RED the the value of the option Red(/static/imag1.jpg) should fill in the src of the image.

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

And also select the first option value as the default image.

推荐答案

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

   });

});

使用上面的代码.

这篇关于根据选择框中的选项值更改图像的src值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！