PDA

View Full Version : Jquery | Update Image From List Box



nullified
01-21-2009, 04:17 AM
Im sure I had seen something like what I am after on here previously but can not find it.

I have a simple list/select box that has a list of image names in it.I want to be able to select one of the image namesd and it will display it to the right of the box.This is what I have come up with after a lot of searching.


Javascript:


$(document).ready(function(){

$("#MyImage").bind('change', function() {
var update_pic = $(this).val();
if (update_pic) {
$('#NewPic').attr('src', 'indices/icons/' + update_pic + '' );
}
});

});



HTML:


<select id="MyImage">
<option selected="selected">&nbsp;</option>
<option value="image.png">image.png</option>
<option value="java.png">java.png</option>
<option value="js.png">java.png</option>
</select>
<img id="NewPic" src="#" alt="" />


Now this seems to be perfect except I would like to have multiple list box's.From what I have tried to research it may appear that I have to make it selector based?

Any help would be greatly appreciated

bgallegos
01-30-2009, 05:19 PM
This should help you out.

Script:


<script>
$(function() {
$("select.imageChooser").bind("change", function() {
src = $(this).val();
if(src != "null") {
img = $('<img src="' + src + '"/>');
$("div#imagePreview").empty().append(img);
}
});
});
</script>


HTML:


<select class="imageChooser">
<option value="null">Please Choose an Image</option>
<option value="image.png">image.png</option>
<option value="java.png">java.png</option>
<option value="js.png">java.png</option>
</select>

<select class="imageChooser">
<option value="null">Please Choose an Image</option>
<option value="blah.png">blah.png</option>
<option value="test.png">test.png</option>
<option value="asdf.png">asdf.png</option>
</select>

<div id="imagePreview"></div>

nullified
01-31-2009, 07:50 AM
thankyou very much, that works but is there a way to keep the seperate so each list box works independently.

nullified
02-05-2009, 03:24 AM
any ideas on this as I currently have to use the following....which Im sure could be done a lot better lol




<script>
$(function() {
$("select.imageChooser").bind("change", function() {
src = $(this).val();
if(src != "null") {
img = $('<img src="' + src + '"/>');
$("div#imagePreview").empty().append(img);
}
});

$("select.imageChooser1").bind("change", function() {
src = $(this).val();
if(src != "null") {
img = $('<img src="' + src + '"/>');
$("div#imagePreview1").empty().append(img);
}
});
$("select.imageChooser2").bind("change", function() {
src = $(this).val();
if(src != "null") {
img = $('<img src="' + src + '"/>');
$("div#imagePreview2").empty().append(img);
}
});
});
</script>