CODEWITHSUNDEEP
jquerylistdrop-down-menu
user3668543
user3668543

Reputation: 33

Display table rows based on selected option from drop down list using jquery

I'm need to display the table rows based on a selection of one drop down list. For example, If I've two select tags, in which I've options to select "type of business" & "state". If I select one type and if its sell, I'm displaying all the records which are having "sell" option and same for other option.

But my problem comes, when I change both options, I'm not able to get it. Any ideas would be greatly appreciated.

Here is my code. 

// 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 fiddle

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

Upvotes: 2

Views: 5192

Answers (2)

Raidri
Raidri

Reputation: 17550

Here another way to achieve your goal (fiddle) which does not need an extra array of options.

It checks for every table row and every select if the select is set to allow all values or if the text from the select is equal to the text in the corresponding cell of that row. 

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

});

Upvotes: 0

dreamweiver
dreamweiver

Reputation: 6002

try this way 

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

LIVE DEMO:

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

Note: The working demo on jsfiddle is just a prototype of the actual problem indicated by OP, hence this is subjected to further improvement.

Happy Coding :)

Upvotes: 0

Related Questions