ok i got it..after a week lol....how can i now make it so i can have more than one list box...
<script type="text/javascript"> $(document).ready(function(){ $('#MyImage').bind('change', function() { var update_pic = $(this).val(); if (update_pic) { $('#NewPic').attr('src', 'indices/icons/' + update_pic + '' ); } }); }); </script> <select id="MyImage"> <option selected="selected"> </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="" /> On Jan 19, 3:32 pm, dfwcomputer <dfwcompu...@gmail.com> wrote: > I feel close yet so far away lol > > I can get it to display the image path but how do I update the img > src > > any ideas? > > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" > "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> > <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> > <head><title></title> > > <script type="text/javascript" src="http://ajax.googleapis.com/ajax/ > libs/jquery/1.2.6/jquery.min.js"></script> > > <script type="text/javascript" src="http://texotela.appspot.com/js/ > plugins/jquery.selectboxes.js"></script> > <script type="text/javascript" src="http://www.texotela.co.uk/js/ > parsesamples.js"></script> > <script type="text/javascript"> > $(document).ready( > function() > { > parseSamples(); > $("#debug").hide(); > $("select").change( > function() > { > $("#debug").show(); > > $("#debug").html("images/icons/" + this.value + "'"); > } > ); > } > ) > </script> > </head> > <body> > <form id="example" action="javascript:void()"> > <p><select name="myselect" id="myselect"> > <option value="java.png">#myselect option 1</option> > <option value="js.png">#myselect option 2</option> > </select></p> > <p>My Select 2:</p> > > <div id="debug"> > <img src="indices/icons/php.png" alt="" /> > </div> > </form> > </body> > </html> > > On Jan 18, 3:08 pm, dfwcomputer <dfwcompu...@gmail.com> wrote: > > > Im sure this is probably very simple...like me :( > > > I have been searching for hours now without any results > > > I have a list box which displays an image when you select it all i > > want to do is update it to use jquery and also make it so i can use > > multiple list box's as currently anymore than one list box stops them > > all from working...I think it needs to be selector based? > > > Here is the current code Im using > > > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" > > "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> > > <html xmlns="http://www.w3.org/1999/xhtml"> > > <head> > > <title>Dynamic Update</title> > > <script language="javaScript" type="text/javascript"> > > //<![CDATA[ > > function update_picture(newimage) { > > document.picture_image.src = "images/icons/" + newimage; > > } > > //]]> > > </script> > > </head> > > <body>Images: > > <select name="newpicture" onchange="update_picture(this.options > > [selectedIndex].value);"> > > <option selected="selected">Select Image</option> > > <option value="arrow-down.png">arrow-down.png</option> > > <option value="arrow-up.png">arrow-up.png</option> > > <option value="back.png">back.png</option> > > <option value="blank.gif">blank.gif</option> > > </select> > > <img src="images/icons/default.png" alt="" name="pic_image" > > border="0" id="picture_image" /> > > </body> > > </html>