改变一个选择框

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

改变一个选择框

回答

相关问题