Question

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

一些问题......

代码不是DRY，看起来比它需要的更冗长，所以不易维护/可扩展。
当用户选择某个内容，填写表单，转到下一页，然后点击“返回”按钮时，会选择预选的选择字段，但由于没有.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();
});

Answer 3

您可以将所有if语句更改为某些或（||）表达式。
在ready（）上，您可以检查字段是否具有默认值。如果没有，那么你可以手动触发change（）。

Answer 4

我可能不会使用选择框，因为在用户知道选项之前，选择框只是一个很好的选择。不允许神秘的肉。这是一篇关于selection dependant inputs的好文章。

我对这个问题的看法： *只应显示链接到所选选项的部分，因此我不想使用切换。

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

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

4 个答案: