Question

On my page I have a drop-down select box, with a default value of (empty). When the user selects an entry, the appropriate form for that entry type is displayed.

Couple of problems..

1. The code is not DRY and seems more verbose than it needs to be, so not easily maintainable / extensible.
2. When a user selects something, fills in the form, goes to the next page, and then hits the Back button, the select field is pre-selected with their choice, but since there has been no .change() event, the form box is not displayed. They have to select a different <option>, then click back to their original choice to get their forum back.

Here’s the code:

<script type='text/javascript'>     $(document).ready(function(){          $('#select_type').change(function () {             $('fieldset').css('display','none'); # hide all the forms on the page             var selectval = $('#select_type').val();             if (selectval == 'instance')             {                 $('#instance').toggle();             }             if (selectval == 'mob')             {                 $('#mob').toggle();             }             if (selectval == 'dailyquest')             {                 $('#dailyquest').toggle();             }             if (selectval == 'repeatablequest')             {                 $('#repeatablequest').toggle();             }             if (selectval == 'zonequest')             {                 $('#zonequest').toggle();             }             if (selectval == 'reward')             {                 $('#reward').toggle();             }         });      }); </script> 

Help JS gurus of SO!

Answer 1

Instead of the multiple IF clauses, you can iterate over an array of values. But in this case, if there are no other requirements then simply:

$(document).ready(function(){      var select = $('#select_type');      $('#' + select.val()).toggle(); // Toggle the preset value      select.change(function () {          $('fieldset').css('display','none');          $('#' + $(this).val()).toggle();      }); }); 

Should be enough.