jQuery onchange/onfocus 选择框显示图像？答案

【问题标题】：jQuery onchange/onfocus select box to display an image?jQuery onchange/onfocus 选择框显示图像？
【发布时间】：2009-06-12 00:26:03
【问题描述】：

我需要一些帮助来找到一个 jQuery 插件，它可以让我从选择的图像列表中显示图像预览 - onfocus/onchange..

例子：

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

有没有人遇到过这样的事情？我已经尝试搜索它无济于事..

谢谢！

【问题讨论】：

标签： jquery select jquery-plugins onchange onfocus

【解决方案1】：

我不确定你是否需要一个插件来处理这个问题：

$(document).ready(function() {
    $("#image").change(function() {
        var src = $(this).val();

        $("#imagePreview").html(src ? "<img src='" + src + "'>" : "");
    });
});

【讨论】：

谢谢，但它也和我已经做的一样。还有什么...？
我觉得整行src真的没必要，可以很方便的换成$(this).val()
@negative — 在事件处理程序中，this 指的是
我的观点是$('select').val() 将返回其选定选项的值，搜索选择器会降低性能。
@negative — 哦！现在你让我想知道为什么我首先要这样写。 ;-)

【解决方案2】：

我认为没有插件可以解决这个问题，但“手工”完成相当简单

$(document).ready(function(){
    $('#image').change(function(){
            $('#imagePreview').html('<img src="'+$('#image').val()+'"/>');
    });
});

您应该为不存在的图像等添加验证。你的旅费可能会改变。等等

【讨论】：

【解决方案3】：

你真的需要插件吗？

像下面这样简单的东西会起作用吗？

<!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>

【讨论】：

【解决方案4】：

AJAX 的替代方法。我没有测试过它，但是用谷歌搜索了这个话题。以下是一些注意事项：

http://forums.asp.net/t/1107236.aspx

服务器端

response.contentType('image/jpeg');
response.binaryWrite(imageBytes);

Displaying ad content from Respose.WriteFile()/ Response.ContentType

http://www.dotnetperls.com/response-writefile

Response.WriteFile usage:           10.680 s
Byte[] cache, Response.BinaryWrite:  0.094 s

【讨论】：

【解决方案5】：

我在这里分享纯 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>

【讨论】：

【解决方案6】：

一个小小的贡献，我经历了类似的事情并创建了这段代码，如何使用选择选项并使用 jquery 显示一些图像，它也适用于移动设备！！

$(".my_select").change(function() {
   var value_my_select = $(this).val();
   $(".my_select").css({"background":"url(https://via.placeholder.com/468x60?text=My+image+" +value_my_select + ") no-repeat","background-size": "100% 100%"})
}).trigger( "change" ); 

//$(".my_select").val("3333").trigger( "change" );

select {
  width: 100%;
  height: 100px;
  color: transparent;
}

.my_select * {
  color: #000;
  height: 30px;
}

select,option {
  padding: 0 6px;
  margin: 0 0;
  padding: 0 10px;
  text-align: center;
  font-size: 18px;
}

select, option:checked {  font-weight: bold; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="my_select">
      <option>1111</option>
      <option selected>2222</option>
      <option>3333</option>
      </select>

你也可以在这里看到这个：https://jsfiddle.net/diversalizando/40rec3w1/19/

【讨论】：