Reset a list after a reset of the dropdown selection

Question

I have made a list. I've added some dropdown to sort the list. Once its sorted, I would like to be able to reset the dropdown back to nothing. (Accomplished that already). But the list doesn't update back to as if nothing was selected. How can I do that?

Code im using to manipulate the list:

<script>
$.noConflict();
jQuery( document ).ready(function( $ ) {   
$('.container').on("change", 'select', function() {
  var type = $('#BBFHtype').val().toLowerCase(),
    surface = $('#BBFHsurface').val().toLowerCase(),
    sticking = $('#BBFHsticking').val().toLowerCase(),
    panel = $('#BBFHpanel').val().toLowerCase(),
    height = $('#BBFHheight').val().toLowerCase(),
    thickness = $('#BBFHthickness').val().toLowerCase();

  var table = $("#BBFHDoors");
  var trs = table.find('tr');
  trs.hide();    
  var filtered = trs.filter(function(index, elem) {
    var tds = $(elem).find('td');
    if (type !== "all" && tds.eq(1).text().trim().toLowerCase() !== type) {return false;}
    if (surface !== "all" && tds.eq(2).text().trim().toLowerCase() !== surface) {return false;}
    if (sticking !== "all" && tds.eq(3).text().trim().toLowerCase() !== sticking) {return false;}
    if (panel !== "all" && tds.eq(4).text().trim().toLowerCase() !== panel) {return false;}
    if (height !== "all" && tds.eq(5).text().trim().toLowerCase() !== height) {return false;}
    if (thickness !== "all" && tds.eq(6).text().trim().toLowerCase() !== thickness) {return false;}
    return true;
  })

  filtered.show();

  if (filtered.length == 0) {
    alert("No Records Found!!!");
  }
});   
});
</script>

Code im using to reset the selections back to nothing:

$(function () {$("#btnReset").bind("click", function () 
{$("#BBFHtype")[0].selectedIndex = 0; 
 $("#BBFHsurface")[0].selectedIndex = 0;
 $("#BBFHsticking")[0].selectedIndex = 0;
 $("#BBFHpanel")[0].selectedIndex = 0;
 $("#BBFHheight")[0].selectedIndex = 0;
 $("#BBFHthickness")[0].selectedIndex = 0;
});});   

Ive tried playing around with .prop and .attr(selected), and removeattr(). But haven't been successful. EX: $("#BBFHtype")[0].prop("selected", true);

Any help would be awesome!

Answer 1

Just trigger change on the select elements:

$('select').trigger('change');

Complete function:

$(function () {$("#btnReset").bind("click", function () 
{$("#BBFHtype")[0].selectedIndex = 0; 
 $("#BBFHsurface")[0].selectedIndex = 0;
 $("#BBFHsticking")[0].selectedIndex = 0;
 $("#BBFHpanel")[0].selectedIndex = 0;
 $("#BBFHheight")[0].selectedIndex = 0;
 $("#BBFHthickness")[0].selectedIndex = 0;

 $('select').trigger('change');
});});  

Also, see complete working demo here