Q:

How can i hide or show the Items in the table based on Filter condition

I am creating a table  dynamically and also the filter related to it .
This is my jsfiddle 
How can i hide or show the Items in the table based on Filter condition
http://jsfiddle.net/cdkLkcdk/1/
This is my code 
  function fetchVendorCategories(vendor_id) {
       $("#tablecontent").empty();
       return $.ajax({
           type: 'GET',
           url: url + '/admin/getvendorequestedcategories?vendor_id=' + vendor_id,
           jsonpCallback: 'jsonCallback',
           dataType: 'jsonp',
           jsonp: false,
           success: function(response) {
               if (response.details.length <= 0) {
                   $("#deletebtn").hide();
                   }
               var filterhtml = '<select  id="filterstatus" ><option selected="" disabled="">Status</option>';
               var html = '';
               var classstyle = "";
               for (var i = 0; i < response.details.length; i++) {
                   if (response.details[i].status == 'declined') {
                       classstyle = "label-danger";
                   } else if (response.details[i].status == 'approved') {
                       classstyle = "label-success";
                   } else if (response.details[i].status == 'pending') {
                       classstyle = "label-warning";
                   } else if (response.details[i].status == 'corrected') {
                       classstyle = "label-success";
                   }
                   html += '<div class="Table_fluid AddreqTableCols">\
                                    <div class="col_chk"><input type="checkbox" class="checkbox1" id=' + response.details[i].document_id + '></div>\
                                    <div class="col_cate"><p>' + response.details[i].request_message + '</p></div>\
                                    <div class="col_stat"><p class="label_p"><span class="label ' + classstyle + '">' + response.details[i].status + '</span></p></div>\
                                    <div class="col_msg"><p>' + response.details[i].message + '</p></div>\
                                    <div class="col_dat"><p>' + response.details[i].created + '</p></div>\
                                     </div>';
                   var status_val = response.details[i].status;
                   if (status_val) {
                       if (filterhtml.indexOf(status_val) === -1) {
                           filterhtml += '<option value="' + status_val + '">' + status_val + '</option>';
                       }
                   }
               }
               filterhtml += '</select>';
               $("#filterdiv").append(filterhtml);
               $("#tablecontent").append(html);
           }
       });
   }

  <div class="row-fluid" style="margin-top:30px;">
                        <div class="divTableWrap">
                            <!-- Header -->
                            <div class="divTableHeader">
                                <div class="Table_fluid AddreqTableCols">
                                    <div class="col_chk"><input type="checkbox" id="selectall" title="All"></div>
                                    <div class="col_cate"><p>Category Requested</p></div>
                                    <div class="col_stat"><p>Status</p></div>
                                    <div class="col_msg"><p>Message</p></div>
                                    <div class="col_dat"><p>Date</p></div>
                                    <div class="col_dat" id="filterdiv"></div>    
                                </div>
                            </div>
                            <!-- Content -->
                            <div id="tablecontent" class="divTableContent">
                            </div>
                        </div>
                    </div>

Could anybody please help me . 

A:

Listen for the change event (what you already did), take the value $(this).val() (or this.value), hide all table rows and show the ones you want:
$(document).on('change', 'select#filterstatus', function(event) {
    $(".AddreqTableCols").hide();
    $(".label_p:contains('" + $(this).val() + "')")
        .closest(".AddreqTableCols")
        .show();
});

JSFIDDLE

