Jquery根据3个下拉条件显示和隐藏行

时间:2017-06-07 08:50:45

标签: jquery html-select custom-data-attribute

我有2个下拉列表和按钮,我想显示和隐藏行。在表格中,我使用了3种不同的数据属性 - 制造商,类别和袖子长度。当我选择值时,每个下拉列表都有值。但是,我很难根据用户在下拉列表中选择的内容来显示/隐藏正确的行。我需要一个if语句或其他方式,根据用户选择的内容显示正确的结果。我应该注意,用户只能选择一个下拉列表并查看结果。代码如下:

var manufacturerSelected;
var categorySelected;
var sleeveLengthSelectd;

manufacturerSelected = "";
categorySelected = "";
sleeveLengthSelectd = "";

$("#selectManufacturer").change(function(event) {
    manufacturerSelected = $(this).val();
    getResults();
});

$("#selectType").change(function(event) {
    categorySelected = $(this).val();
    getResults();
});

$(".btnLength").click(function(event) {
    selectedButton = $(this).html();
    if(selectedButton == "Short Sleeve"){
        $("#shortSleeve").addClass('btnLengthActive');
        $("#longSleeve").removeClass('btnLengthActive');
        sleeveLengthSelectd = "short";
    }else{
        $("#longSleeve").addClass('btnLengthActive');
        $("#shortSleeve").removeClass('btnLengthActive');
        sleeveLengthSelectd = "long";
    }
    getResults();
});

function getResults(){
    $("#productTable tbody tr").each(function() {
        var manufacturer = $(this).attr('data-manufacturer');
        var category = $(this).attr('data-category');
        var sleeveLength = $(this).attr('data-sleeve');
       if(manufacturerSelected == manufacturer){
        $(this).show();
       }else{
        $(this).hide();
       }
       if(categorySelected == category){
        $(this).show();
       }else{
        $(this).hide();
       }
       if(sleeveLengthSelectd == sleeveLength ){
        $(this).show();
       }else{
        $(this).hide();
       }
    });

0 个答案:

没有答案