Hey all,

I'm having some trouble with what seems to be a fairly simple issue: I have a <select> field with a few options inside of it. The idea is that a user can select an option in this dropdown and, dependent on what they choose, the output in another div with change.

The form:

1. <form class="formStyle">
2.         <fieldset>
3.                 <label for="soFormStyle">style:</label>
4.                 <select name="soFormStyle" id="soFormStyle">
5.                         <option>Select Style</option>
6.                         <option>Page Curl</option>
7.                         <option>Logo</option>
8.                 </select>
9.         </fieldset>
10. </form>

The output div:

1. <div class="formPreview">
2.         <div class="previewWindow">
3.                 <img id="formPreviewImage" src="img/form-slim-plain.jpg" width="450">
4.         </div>
5. </div>

My current JQuery:

1. switch ($('#ssFormStyle :selected').text()) {
2.         case 'Page Curl':
3.                 $('#formPreviewImage').attr({src: "img/form-slim-pagecurl-plain.jpg",})
4.         break;
5.         case 'Logo':
6.                 $('#formPreviewImage').attr({src: "img/form-slim-logo-plain.jpg",})
7.         break;
8. };

So, this JQuery only works if the option is preselected (if I select and reload the page). I thought I was on the right track, but I just can't get it working as I intended. Again, the idea is that a user selects "Page Curl" or "Logo", and the image in the preview pane changes according to their selection.

Any help would be much appreciated. Thanks in advance.