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

我非常感谢你在这方面的帮助。用户将看到两个无序列表。通过单击其中一个列表中的选项，将显示一个表，并隐藏所有其他内容

我的问题是，在我当前的设置中，我无法使所有的表组合正常工作。我可以在单击时使用$（this）.attr（“value”）来获取给定列表的所选值，但是使用$（“#select2 li”）。例如，attr（“value”）将始终返回值“c”，即使用户之前选择了“option 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();
  });
  });

$（文档）.ready（函数（）{
$（'.选择菜单a'）。单击（函数（）{
var text=$（this.text（）；
$（this.parent（）.parent（）.sibbines（）.html（文本+“”）；
$（this.parent（）.sides（）.removeClass（'active'）；
$（this.parent（）.addClass（'active'）；
});
$（“#ac”）.show（）；
$（“#选择1 li”）。单击（函数（）{
target=$（this.attr（“value”）+$（#select2 li”）.attr（“value”）；
$（'table.table'）.hide（）；
$（“#”+target.show（）；
});
$（“#选择2 li”）。单击（函数（）{
target=$（“#select1 li”）.attr（“值”）+$（this.attr（“值”）；
$（'table.table'）.hide（）；
$（“#”+target.show（）；
});
});

我想让用户只需为任一列表提供一个输入即可查看不同的表，而不需要在两个列表中都进行选择

---

有谁能帮我解决这个问题或者建议一个更好的方法吗？谢谢

只使用#select2 li而不是#select2 li.active获取值 即使我已经在JSFIDLE中更新了代码，也要尝试用这个块替换代码

  $("#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();
  });