If a visitor on my site selects a value in a selection box, I want it's corresponding div to be displayed.

If the visitor selects an other value, I want to hide the old div and display the new div.

The coding I have so far doesn't work properly.. the first and last select options don't display the div at all, and the second select option only flashes the div.

I hope someone can help me out..

PS: The Option1, Option2 and Option3 values are being pulled from my db, but these values can have other names.

2. function showonlyone() {
3. var thechosenone = "."+$('#pgroup').val();
4. $(thechosenone).show(1).hide(1);
5. }
6. 
   
8. <select name="pgroup" id="pgroup" size=3 onchange="javascript:showonlyone();"> 
9. <option value="Option1">Option1</option>
10. <option value="Option2">Option2</option>
11. <option value="Option3">Option3</option>
12. </select>     
13. 
    
14. <div class="Option1">text option 1</div>
15. <div class="Option2" style='display:none;'>text option 2</div>
16. <div class="Option3" style='display:none;'>text option 3</div>