hide/show based on select value

hide/show based on select value

I am trying to make it so that when an select item is selected, that the corresponding div is shown, and the other divs are hidden. What I have will display the first div, but even if I select the second, it will change the select value to the first and display only the first div. I'm sure this is something simple.

-----
  2. <p><label for="id_related_to">Related To:</label>
  3. <select name="related_to" size="1" id="id_related_to" >
  4. <option value="">Select...</option>
  5. <option value="1">Course</option>
  6. <option value="2">Clinical Experience</option>
  7. <option value="3">Non-Course Related</option>
  8. </select></p>

  10. <script>
  11. $("#id_related_to").change(function () {

  13. if ($('#id_related_to').val('1'))
  14. {
  15. $('#courses').show();
  16. $('#clinical_experiences').hide();
  17. $('#non_course').hide();
  18. }
  19. else if ($('#id_related_to').val('2'))
  20. {
  21. $('#courses').hide();
  22. $('#clinical_experiences').show();
  23. $('#non_course').hide();
  24. }
  25. else if ($('#id_related_to').val('3'))
  26. {
  27. $('#courses').hide();
  28. $('#clinical_experiences').hide();
  29. $('#non_course').show();
  30. }
  31. else
  32. {
  33. $('#courses').hide();
  34. $('#clinical_experiences').hide();
  35. $('#non_course').hide();
  36. }

  38. });
  39. </script>
  40. <div id="courses"> <p><label for="id_courses">Course</label>
  41. <select name="courses" id="id_courses">
  42. <option value="" selected="selected">Select...</option>
  43. <option value="1">Gross Anatomy</option>
  44. <option value="2">Not so Gross Anatomy</option>
  45. </select></p>

  47. </div><div id="clinical_experiences"> <p><label for="id_clinical_experience_location">Clinical Experience Location</label>
  48. <select name="clinical_experience_location" id="id_clinical_experience_location">
  49. <option value="" selected="selected">Select...</option>
  50. <option value="3"></option>
  51. <option value="1">Location 1</option>
  52. <option value="2">Location 2</option>
  53. </select></p>

  55. </div><div id="non_course"> <p><label for="id_non_course_related_info">Non-Course Related Info:</label>
  56. <textarea name="non_course_related_info" id="id_non_course_related_info" class="wide" rows="2" cols="80"></textarea></p>