Question

我需要根据一个下拉列表的选择显示表行。例如，如果我有两个选择标签，我可以选择“商业类型”＆amp; “州”。如果我选择一种类型并且如果它出售，我将显示所有具有“卖出”选项的记录和其他选项相同的记录。

但我的问题来了，当我改变这两个选项时，我无法得到它。任何想法都将不胜感激。

这是我的代码。

// On changing the select option, display the rows which are relevant to the option selected.

$(document).on('change','.Cat_Table_Header', function(){
    var id = $(this).attr('id');
    var val = $(this).find("option:selected").text();       
    var selectedNoOfOption = parseInt($.inArray( id, optionsTextArray )) +1 ;
    $('#catleads tbody tr').each(function() {
        if($(this).find('td:eq('+selectedNoOfOption+')').text() == val) {
            $(this).show();
        } else {
            $(this).hide();
        }
    });

    if(val == $(this).find("option:eq(0)").text()) {
        $('#catleads tbody tr').show();
    }
});

JS小提琴

http://jsfiddle.net/W4Km8/776/

Answer 1

试试这种方式

 $(document).on('change','.Cat_Table_Header', function(){
   var id = $(this).attr('id');
   var val = $(this).find("option:selected").map(function(){ return this.value }).get().join(",").split(",");
   var selectedNoOfOption = parseInt($.inArray( id, optionsTextArray )) +1 ;
   for (var item in val) {
     $('#catleads tbody tr').each(function() {
        if($(this).find('td:eq('+selectedNoOfOption+')').text() == item) {
           $(this).show();
        } else {
           $(this).hide();
        }
     });
   }; // end of for each

  if(val == $(this).find("option:eq(0)").text()) {
     $('#catleads tbody tr').show();
  }
});

现场演示：

http://jsfiddle.net/dreamweiver/jYHPE/36/

注意：jsfiddle上的工作演示只是OP指示的实际问题的原型，因此需要进一步改进。

快乐编码：）

Answer 2

这是另一种实现目标的方法（fiddle），不需要额外的选项数组。

它检查每个表行和每个选择是否将select设置为允许所有值，或者select中的文本是否等于该行的相应单元格中的文本。

$(document).on('change', '.Cat_Table_Header', function () {

    $('#catleads tbody tr').each(function (trIndex, tr) {
        var visible = true;
        $('.Cat_Table_Header').each(function (selectIndex, select) {
            var $option = $(select).find('option:selected');
            var $td = $(tr).find('td').eq(selectIndex);
            visible = visible && ($option.val() == 'all' || $td.text() == $option.text());
        });
        if (visible) {
            $(tr).show();
        } else {
            $(tr).hide();
        }
    });

});

使用jquery从下拉列表中显示基于所选选项的表行

2 个答案: