Question

我很感激有关Fiddle的一些帮助。将向用户呈现两个无序列表。通过单击其中一个列表中的选项，将显示一个表，其他所有内容都将隐藏。

我的问题是，使用我当前的设置，我无法让所有表组合正常工作。我可以在点击时使用$（this）.attr（“value”）来获取给定列表的选定值，但是使用$（“＃select2 li”）。attr（“value”）例如将始终返回值“ c“，即使用户之前选择了”选项d“。这导致诸如表“bd”之类的选项不可能。

这是JavaScript：

  $(document).ready(function () {
  $('.select-menu a').click(function () {
      var text = $(this).text();
      $(this).parent().parent().siblings().html(text + ' <span class="caret"></span>');
      $(this).parent().siblings().removeClass('active');
      $(this).parent().addClass('active');
  });


  $("#ac").show();
  $("#select1 li").click(function () {
      target = $(this).attr("value") + $("#select2 li").attr("value");
      $('table.table').hide();
      $("#" + target).show();
  });
  $("#select2 li").click(function () {
      target = $("#select1 li").attr("value") + $(this).attr("value");
      $('table.table').hide();
      $("#" + target).show();
  });
  });

我想允许用户必须只为一个列表提供一个输入以查看不同的表，而不是在两个列表中都需要选择。

任何人都可以帮我解决这个问题或建议更好的方法吗？谢谢！

Answer 1

只使用＃select2 li而不是＃select2 li.active获取值尝试用这个块替换你的代码，即使我已经在jsfiddle中更新了。

  $("#select1 li").click(function () {
          target = $(this).attr("value") + $("#select2 li.active").attr("value");
          $('table.table').hide();
          $("#" + target).show();
      });

  $("#select2 li").click(function () {
      target = $("#select1 li.active").attr("value") + $(this).attr("value");
      $('table.table').hide();
      $("#" + target).show();
  });

基于多个无序列表选择显示/隐藏表

1 个答案: