Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    May 2008
    Location
    Australia
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Jquery | Update Image From List Box

    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

  • #2
    New Coder
    Join Date
    Jul 2008
    Posts
    45
    Thanks
    0
    Thanked 6 Times in 6 Posts
    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>

  • Users who have thanked bgallegos for this post:

    nullified (02-05-2009)

  • #3
    New to the CF scene
    Join Date
    May 2008
    Location
    Australia
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    thankyou very much, that works but is there a way to keep the seperate so each list box works independently.

  • #4
    New to the CF scene
    Join Date
    May 2008
    Location
    Australia
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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>


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •