php - Dynamically auto select , changes Image elsewhere -

this me thinkign of jazzing mundane input field.

ok have input element, , have pre-propagated small db table id , name , image name

so thinking.

we have input element, user begins typing. lets appl...

drop down ( live auto suggest pops ) apple , select apple , within div element elsewhere on page, image div displays apple.png

likewise if choose banana , banana.png shows in div .

ok have got now.

well have auto suggest ( live search auto complete done ) fine , dandy.

i have input element working, , can select type suggestions.

what cannot figure out how, use ( possibly ajax suppose ) hmm .. or other method, way of displaying image elsewhere, reflects choice made.

to make things easier.

all auto completes exact same image file name, so:

apple becomes apple.png cake becomes cake.php

i sure js can here. not sure how. have thought getelementbyid

anyhoo .. sometimes, asking question may invoke response has done similar.

cannot show code, element want create , doesnt exist yet.

but simplicity sake, lets take select box method:

<select id="fruit" name="fruit">                                 <option value="">please select fruit</option>                                 <option value="apple">apple</option>                                 <option value="cake">cake</option>                             </select> 

presently auto suggest , auto complete looks this:

<div class="field"><label for="fruit">pick fruit </label>  

 

any appreciated...

you can jquery. copy code sample below , paste between body tags of html file. replace "myselector" element's option values own. when select item drop menu, image dynamically change.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>  <script type="text/javascript" language="javascript"> $(function() {     $("#myselector").change(function() { // assign handler.         if ($("#myselector").val() != '') {             $("#myimage").attr('src', $("#myselector").val()); // change image.         }     }); }); </script>  <select name="myselector" id="myselector">     <option value="">select image</option>     <option value="http://www.gravatar.com/avatar/e2f0c2f013205c397a7b00bc3012a027?s=32&d=identicon&r=pg">image 1</option>     <option value="http://www.gravatar.com/avatar/06383b51463f855d7cc0f07d4566bd42?s=32&d=identicon&r=pg">image 2</option> </select>  <img name="myimage" id="myimage" src="http://www.gravatar.com/avatar/c259fe3371bba238ad95021e67741e9c?s=32&d=identicon&r=pg" />