jquery - change the src value of an image based on the options value in a select box

Question

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>

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

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.

Answer 1

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

   });

});

Use above code.