Jquery | Update Image From List Box

nullified · 01-21-2009, 03: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:

Code:

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

});

HTML:

Code:

<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, 04:19 PM

This should help you out.

Script:

Code:

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

HTML:

Code:

        <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, 06: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, 02:24 AM

any ideas on this as I currently have to use the following....which Im sure could be done a lot better lol

Code:

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