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 2 of 2
  1. #1
    Regular Coder
    Join Date
    Mar 2010
    Posts
    198
    Thanks
    78
    Thanked 5 Times in 5 Posts

    update two images using dropdown box

    Hi guys.
    Is it possible to store two values in a dropdown box and update two images when a option is selected?

    For example purpose I have a html dropdown box and two images:
    Code:
    <img src="image1.jpg" />
    <img src="image2.jpg" />
    
    <select>
    <option selected="selected" value="default images">default</option>
    <option value="img1.jpg, img2.jpg">USA</option>
    <option value=", img2.jpg">UK</option>
    </select>
    now what im trying to do is: the first image in the option value should be replace image 1 and the img2.jpg should replace image2.jpg
    But sometimes I will only have one image value like the UK option in which case the dropdown box should update image1 to a blank image
    but should update image two with img2.jpg.
    I don't really know how I can do this is this possible with JQuery?
    If so how should I start to get this working?

    thanks for any help.

  • #2
    Regular Coder
    Join Date
    Mar 2010
    Posts
    198
    Thanks
    78
    Thanked 5 Times in 5 Posts
    Hi guys oke this is what I came up with.
    If there is anything I could aprove on it let me know thanks

    current working code looks like this:

    JQuery:
    Code:
    <script type="text/javascript">	
    	$(document).ready(function(){
    		$('#update_src').change(function(){
    		$("#update_src option:selected").each(function(){
    			var srcValue = $(this).val().split(',');
    			$('#cover img:eq(0)').hide().attr('src',(!srcValue[0]) ? 'no_image.jpg' : srcValue[0]).fadeIn('slow');
    			$('#cover img:eq(1)').hide().attr('src',(!srcValue[1]) ? 'no_image.jpg' : srcValue[1]).fadeIn('slow');
    			});
    		});
    	});
    </script>
    HTML
    Code:
    <div id="cover">
    	<img width="120" src="image1.jpg" />
    	<img width="120" src="image2.jpg" />
    </div>
    <select id="update_src">
    	<option value="image1.jpg, image2.jpg" selected="selected">1</option>
    	<option value=",image3.jpg">2</option>
    </select>


  •  

    Posting Permissions

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