display image based on select box choice
<p>I am doing an advertising form , with preview ad below.</p>

<p>So as user types their advert, the preview updates as they go.
One of the selections is dropdown box, where they can choose their service type..</p>

<p>I have a master div, for the preview. And I want to add a image in one corner of that div, based on the selection choice from the advert form...</p>

<p>So in drop down select, we have:</p>

<pre><code>&lt;select style="width: 220px; display: none;" id="speedB" name="category"&gt;
    &lt;option value=""&lt;?if ($category == ""){?&gt; selected="selected"&lt;?}?&gt;&gt;Please Select&lt;/option&gt;
    &lt;option value="1"&lt;?if ($category == "1"){?&gt; selected="selected"&lt;?}?&gt;&gt;Pest Inspectors&lt;/option&gt;
    &lt;option value="3"&lt;?if ($category == "3"){?&gt; selected="selected"&lt;?}?&gt;&gt;Building Inspectors&lt;/option&gt;
    &lt;option value="2"&lt;?if ($category == "2"){?&gt; selected="selected"&lt;?}?&gt;&gt;Removalists&lt;/option&gt;
    &lt;option value="5"&lt;?if ($category == "5"){?&gt; selected="selected"&lt;?}?&gt;&gt;Conveyancing&lt;/option&gt;
    &lt;option value="4"&lt;?if ($category == "4"){?&gt; selected="selected"&lt;?}?&gt;&gt;Pool Inspectors&lt;/option&gt;
&lt;/select&gt;
</code></pre>

<p>And in the preview div I have:</p>

<pre><code>&lt;div class="dirResult"&gt;
&lt;div class="showImage"&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>So the div "showImage" is what I want to initiate based on the choice user has selected in the select dropdown in the form.</p>

<p>so:
if value="1" then show pest.png
if value="2" then show build.png
so on and so forth.</p>

<p>Is there a simple way to do this ?
I suppose showImage div must be pre-set to display:none</p>

<p>But after that I am stumped.</p>

<p>UPDATE</p>

<p>Based on ingenu's answer below.</p>

<p>I am thinking perhaps add different div classes instead of individual pngs, that way I can control css etc.</p>

<p>So something like :</p>

<pre><code>$('#speedB').change(function() {
                      var myimages = {
                        '': '.nothing',
                        '1': '.pest',
                        '2': '.build'
                      }
                      var selectedImage = myimages[$(this).val()];
                      $('#topright').html('not sure what to put here');});
</code></pre>

<p>Then in css have:</p>

<pre><code>.pest {
background: url("pest.png") no-repeat scroll 0 0 transparent;
height: 70px;
position: absolute;
right: 0;
top: 0;
width: 70px;
</code></pre>

<p>}</p>
