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

選択リストで変更機能を使用する

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

Answer 2

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