0

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

几个问题..

  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 高手的 SO!

4

4 回答 4

7

您可以迭代一个值数组,而不是多个 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();
     });
});

应该够了。

于 2009-01-02T22:53:45.520 回答
5
$(document).ready(function() {
  $("#select_type").change(function () {
    $("fieldset").css("display", "none");
    $("#" + $(this).val()).toggle();
  }).change();
});
于 2009-01-02T23:01:07.643 回答
0
  1. 您可以将所有这些 if 语句更改为一些 or(||) 表达式。
  2. 在 ready() 上,您可以检查字段是否具有默认值。如果没有,那么您可以手动触发 change()。
于 2009-01-02T22:59:41.030 回答
0

我可能不会使用选择框,因为只有当用户在下拉选项之前就知道这些选项时,选择框才是一个不错的选择。不允许使用神秘肉。这是一篇关于选择依赖输入的好文章。

我对这个问题的看法: * 应该只显示链接到所选选项的部分,所以我不想使用切换。

$(function(){
  var sel = $("#select_type");
  $("#"+sel.val()).show();
  sel.change(function(){
    $(this).children("option").each(function(){
      $("#"+this.value)[this.selected ? "show" : "hide"]();
    });
  });
});
于 2009-01-03T00:10:03.277 回答