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