jQuery onchange/onfocus 选择框来显示图像？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/984484/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery onchange/onfocus select box to display an image?
提问by SoulieBaby
I need some help finding a jQuery plugin which will allow me to display an image preview from a select list of images - onfocus/onchange..
我需要一些帮助来找到一个 jQuery 插件，它允许我从选择的图像列表中显示图像预览 - onfocus/onchange..
Example:
例子：
<select name="image" id="image" class="inputbox" size="1">
<option value=""> - Select Image - </option>
<option value="image1.jpg">image1.jpg</option>
<option value="image2.jpg">image2.jpg</option>
<option value="image3.jpg">image3.jpg</option>
</select>
<div id="imagePreview">
displays image here
</div>
Has anyone come across something like this? I've tried searching for it to no avail..
有没有人遇到过这样的事情？我试过搜索它无济于事..
Thank you!
谢谢！
回答by Ben Blank
I'm not sure you need a plugin to deal with this:
我不确定你需要一个插件来处理这个问题：
$(document).ready(function() {
$("#image").change(function() {
var src = $(this).val();
$("#imagePreview").html(src ? "<img src='" + src + "'>" : "");
});
});
回答by codehead
I don't think there is a plugin for this, but it is fairly trivial to do "by hand"
我不认为有一个插件，但是“手动”做是相当简单的
$(document).ready(function(){
$('#image').change(function(){
$('#imagePreview').html('<img src="'+$('#image').val()+'"/>');
});
});
You should add a validation for non-existent images and such. Your mileage may vary. etc.
您应该为不存在的图像等添加验证。你的旅费可能会改变。等等。
回答by tschaible
Do you really need a plugin?
你真的需要插件吗？
Would something simple like below work?
像下面这样简单的东西会起作用吗？
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>JQuery Image</title>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#image").change(function() {
$("#imagePreview").empty();
if ( $("#image").val()!="" ){
$("#imagePreview").append("<img src=\"" + $("#image").val() + "\" />");
}
else{
$("#imagePreview").append("displays image here");
}
});
});
</script>
</head>
<body>
<select name="image" id="image" class="inputbox" size="1">
<option value=""> - Select Image - </option>
<option value="image1.jpg">image1.jpg</option>
<option value="image2.jpg">image2.jpg</option>
<option value="image3.jpg">image3.jpg</option>
</select>
<div id="imagePreview">
displays image here
</div>
</body>
</html>
回答by tschaible
Alternative method with AJAX. I have not tested it, but googled about the topic. Here are some notes:
使用 AJAX 的替代方法。我没有测试过，但在谷歌上搜索过这个话题。以下是一些注意事项：
http://forums.asp.net/t/1107236.aspx
http://forums.asp.net/t/1107236.aspx
Server-side
服务器端
response.contentType('image/jpeg');
response.binaryWrite(imageBytes);
Displaying ad content from Respose.WriteFile()/ Response.ContentType
显示来自 Respose.WriteFile()/ Response.ContentType 的广告内容
http://www.dotnetperls.com/response-writefile
http://www.dotnetperls.com/response-writefile
Response.WriteFile usage: 10.680 s
Byte[] cache, Response.BinaryWrite: 0.094 s
回答by Sandeep Tawaniya
I am sharing here pure javascript version to change image using dropdown :-
我在这里分享纯 javascript 版本以使用下拉菜单更改图像：-
<html>
<head>
<title></title>
<script language="JavaScript" type="text/javascript">
var Path='http://www.domainname.com/images/';
function CngColor(obj){
index=obj.selectedIndex;
if (index<1){ return; }
document.getElementById('Img1').src=Path+obj.options[index].value;
}
</script></head>
<body>
<select onchange="CngColor(this);" >
<option >Select</option>
<option value="Zero.gif" >Zero</option>
<option value="One.gif" >1</option>
<option value="Two.gif" >2</option>
<option value="Three.gif" >3</option>
<option value="Four.gif" >4</option>
</select>
<img id="Img1" src="http://www.domainname.com/images/Blank.gif" width=100 height=100 >
</body>
</html>
