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

Question

在我的页面上,我有一个下拉选择框,默认值为(空).当用户选择条目时,将显示该条目类型的相应表单.

几个问题..

1. 代码不是DRY,看起来比它需要的更冗长,因此不易维护/可扩展.
2. 当用户选择某些内容,填写表单,转到下一页,然后点击"返回"按钮时,会根据自己的选择预先选择选择字段,但由于没有.change()事件,因此不会显示表单框.他们必须选择不同的<option>,然后点击回到他们原来的选择,让他们的论坛回来.

这是代码:

<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>

帮助JS的大师!

Answer 1

您可以迭代一组值,而不是多个IF子句.但在这种情况下,如果没有其他要求那么简单地说:

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

应该够了.

Answer 2

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