ansaurus

Question

jQuery onchange/onfocus select box to display an image?

Answer 1

A:

Yeh I'm not after a lightbox, but thank you, I'm after the selected image to simply display inside a div underneith the drop down box, so they can see which image they're selecting in the form, like an image preview before they finish the form and submit it.. :)

SoulieBaby 2009-06-12 00:34:16

Answer 2

+10 A:

I'm not sure you need a plugin to deal with this:

$(document).ready(function() {
    $("#image").change(function() {
        var src = $("option:selected", this).val();
        $("#imagePreview").html(src ? "<img src='" + src + "'>" : "");
    });
});

Ben Blank 2009-06-12 00:37:46

thank you muchly, exactly what I wanted!! :)

SoulieBaby 2009-06-12 00:42:50

Thanks but it also does the same as i have already made.Some thing else...?

Muhammad Sajid 2010-01-11 10:50:07

+1 Elegant and simple.

Rap 2010-07-27 20:13:19

Answer 3

+2 A:

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.

codehead 2009-06-12 00:45:00

Answer 4

+1 A:

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"&gt;
<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>

tschaible 2009-06-12 00:46:00

Answer 5

A:

http://marghoobsuleman.com/jquery-image-dropdown

brennan 2009-10-15 21:54:25

ansaurus

tags:

views:

answers:

jQuery onchange/onfocus select box to display an image?

related questions