Show/Hide Table Based on Multiple Unordered List Selections

Question

I'd appreciate some help regarding this Fiddle . A user would be presented with two unordered lists. By clicking on an option in one of the lists, a table will be shown and all else hidden.

My problem is that with my current setup, I can't get all the table combinations to work properly. I can use $(this).attr("value") on click to get the selected value for a given list, but using $("#select2 li").attr("value") for instance will always return value "c", even if a user had selected "option d" previously. This results in options like table "bd" not being possible.

Here's the 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();
  });
  });

I wanted to allow for the user to have to provide only one input for either list to see a different table, instead of requiring a selection in both lists.

Can anyone help me with this please or suggest a better approach? Thanks!

Answer 1

you fetching value with only #select2 li instead of #select2 li.active try to replace your code with this block even i have updated in 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();
  });