基於多個無序列表選擇顯示/隱藏表格

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