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

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