如何使这个jQuery函数更优雅？

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.

Answer 2

$(document).ready(function() {
  $("#select_type").change(function () {
    $("fieldset").css("display", "none");
    $("#" + $(this).val()).toggle();
  }).change();
});

Answer 3

1. You could change all those if statements to some or(||) expressions.
2. On ready(), you could check if the fields have the default value. If not, then you could manually trigger change().

Answer 4

I probably wouldn't use a select box, as select boxes are only a good choice when the options are known to the user before they pull it down. No mystery meat allowed. Here is a good article on selection dependant inputs .

My take on this problem: * Only the section linked to the selected option should be shown, so I don't want to use toggle.

$(function(){
  var sel = $("#select_type");
  $("#"+sel.val()).show();
  sel.change(function(){
    $(this).children("option").each(function(){
      $("#"+this.value)[this.selected ? "show" : "hide"]();
    });
  });
});