Question

I am doing an advertising form , with preview ad below.

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..

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…

So in drop down select, we have:

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

And in the preview div I have:

<div class="dirResult">
<div class="showImage"></div>
</div>

So the div “showImage” is what I want to initiate based on the choice user has selected in the select dropdown in the form.

so:
if value=”1″ then show pest.png
if value=”2″ then show build.png
so on and so forth.

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

But after that I am stumped.

UPDATE

Based on ingenu’s answer below.

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

So something like :

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

Then in css have:

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

}

Answer 1

Here’s a prototype: (untested)

$('#speedB').change(function() {
  var myimages = {
    '': 'default.png',
    '1': 'pest.png',
    '2': 'build.png'
  }
  var selectedImage = myimages[$(this).val()];
  $('.showImage').html('<img src="'+selectedImage+'" alt="" />');
});

Edit: Inserting containers instead of images:

$('#speedB').change(function() {
  var myclasses = {
    '': 'default',
    '1': 'pest',
    '2': 'build'
  }
  var selectedClass = myclasses[$(this).val()];
  $('.showImage').html('<div class="'+selectedClass+'"></div>');
});