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

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 获取值尝试用这个 block 替换你的代码，即使我已经在 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();
  });