Trying to show/hide things with a <select> menu

Trying to show/hide things with a <select> menu

I have a <select> menu for my support tickets that asks you what your issue is. Depending on what you pick, it is supposed to display a form related to that issue. For example, if you choose "Report a Bug" the bug report form should be displayed. Well, I cannot get it to work. Here is what I have:

The page links to an external JavaScript file that has this in it:
  1. $(document).ready(function() {
  2. $('div.hidden').hide();   
  3. });

And this is the code in question:

  1. <script type="text/javascript">
  2. ("#showhide_form").change(function() {
  3.   $("#" + $(this).val()).show();
  4. });
  5. </script>
  6. ...
  7. <body>
  8. <strong>What do you want to do?</strong>
  9. <form name="ticket_menu">
  10. <select name="ticket_type" id="showhide_form">
  11. <option value=""></option>
  12. <option value="player_report">Report a Player</option>
  13. <option value="bug_report">Report a Bug</option>
  14. <option value="mistake_report">Report a Mistake</option>
  15. <option value="feedback">Give Feedback</option>
  16. <option value="other">Something Else</option>
  17. </select>
  18. </form>
  19. <br /><br /><div class="hidden" id="player_report">player report form code will go here</div>
  20. <br /><br /><div class="hidden" id="bug_report">bug report form code will go here</div>
  21. <br /><br /><div class="hidden" id="mistake_report">mistake report form code will go here</div>
  22. <br /><br /><div class="hidden" id="feedback">feedback form code will go here</div>
  23. <br /><br /><div class="hidden" id="other">other form code will go here</div>
  24. </body>