改變一個選擇框

我有一個img標籤和一個選擇框基於期權值圖像的src值改變一個選擇框

<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中。

並且還選擇第一個選項值作爲默認圖像。

來源

2013-08-05 Sakeer

你做了什麼？ –

你自己試過了嗎？ –

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

    }); 

});

使用上面的代碼上。

來源

2013-08-05 09:27:58

謝謝亞爾這麼簡單。由於我是jquery的初學者，我覺得它非常困難..謝謝........ – Sakeer

@Kukku我的樂趣亞爾。只是接受答案。 –

我如何設置默認圖像？我需要選擇框中的第一個值作爲我的默認圖像... – Sakeer

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

來源

2013-08-05 09:25:22

設置的默認值似乎不能正常工作......... – Sakeer

利用變化功能的選擇列表

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

來源

2013-08-05 09:26:24 Rex

您可以將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

來源

2013-08-05 09:32:18 ostapische

改變一個選擇框

回答

相關問題