隐藏表格行基于2个下拉列表中的选择

Question

I am hoping that someone here will be able to assist me, I am trying to create a list of applications and servers that can be filtered through the use of 2 drop down lists (due to there being over 100 rows worth of data in the table.

So far I have got the table being filtered off either or the Application Name or the Server Function, what I want to get working now is that the table filters based off BOTH selections.

So currently if I pick APP1 off the first drop down it will show all entries for APP1, however if I try to select DB Server it will show ALL applications that have DB Servers instead of just showing APP1's DB Servers.

I am unable to provide the body/contents of the table due to company policy but I have provided the first row at least which would have the headers.

I cannot access jfiddle or anything like that to give a working example as it is blocked by the company I work for.

Hopefully the information I have provided will be enough.

Thanks in advance.

 $(document).ready(function () { $("#application").on("change", function(){ var appName = $(this).find("option:selected").html(); $("table tr td:first-child").each( function(){ if($(this).html() != appName){ $(this).parent().hide(); } else{ $('#titles').show(); $(this).parent().show(); } }); }); $("#function").on("change", function(){ var functionName = $(this).find("option:selected").html(); $("table tr td:first-child").next().each( function(){ if($(this).html() != functionName){ $(this).parent().hide(); } else{ $('#titles').show(); $(this).parent().show(); } }); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div title="Select Application""> <strong>Select Application</strong><br> <select id="application" class="form-control selectpicker"> <option value="">--Select--</option> <option value="">APP1</option> <option value="">APP2</option> <option value="">APP3</option> <option value="">APP4</option> <option value="">APP5</option> <option value="">APP6</option> <option value="">APP7</option> <option value="">APP8</option> <option value="">APP9</option> <option value="">APP10</option> <option value="">APP11</option> <option value="">APP12</option> </select> </div> <br> <div title="Select Server Function""> <strong>Select Application</strong><br> <select id="function" class="form-control selectpicker"> <option value="">--Select--</option> <option value="">DB Server</option> <option value="">Automate Job Server</option> <option value="">Web Server</option> <option value="">Application Server</option> <option value="">Database & Application Server</option> <option value="">Citrix Server</option> <option value="">Inbound/Outbound Server</option> <option value="">COMMS Server</option> <option value="">WEBFARM Servers</option> <option value="">WAS Instances</option> <option value="">APP/Web Server</option> <option value="">Autosys</option> <option value="">Qlik Sense Server</option> </select> </div> <br> <table style="width: 733.38px;" class="> <tbody> <tr style="height: 20px;" id="titles";> <td style="width: 147px; height: 20px;"><strong>Application Name</strong></td> <td style="width: 162px; height: 20px;"><strong>Function</strong></td> <td style="width: 256px; height: 20px;"><strong>Server Name</strong></td> <td style="width: 138.38px; height: 20px;"><strong>ENVIRONMENT</strong></td> </tr> <tr style="height: 20px;"> <td style="width: 147px; height: 20px;">APP1</td> <td style="width: 162px; height: 20px;">DB Server</td> <td style="width: 256px; height: 20px;">ServerName</td> <td style="width: 138.38px; height: 20px;">PROD</td> </tr> <tr style="height: 20.5px;"> <td style="width: 147px; height: 20.5px;">APP1</td> <td style="width: 162px; height: 20.5px;">App Server</td> <td style="width: 256px; height: 20.5px;">ServerName</td> <td style="width: 138.38px; height: 20.5px;">COB</td> </tr> <tr style="height: 20px;"> <td style="width: 147px; height: 20px;">APP2</td> <td style="width: 162px; height: 20px;">DB Server</td> <td style="width: 256px; height: 20px;">ServerName</td> <td style="width: 138.38px; height: 20px;">UAT</td> </tr> <tr style="height: 20px;"> <td style="width: 147px; height: 20px;">APP3</td> <td style="width: 162px; height: 20px;">DB Server</td> <td style="width: 256px; height: 20px;">ServerName</td> <td style="width: 138.38px; height: 20px;">PROD</td> </tr> 

Answer 1

You should add some condition. The second dropdownlist match is not enough, you first check second dropdownlist match. I have add second condition like that in if block.

$("#application").find("option:selected").html() != $(this).prev().html();

Full code:

$("#function").on("change",
               function(){
                   var functionName = $(this).find("option:selected").html();
                   $("table tr td:first-child").next().each(
                           function(){
                               if($(this).html() != functionName || $("#application").find("option:selected").html() != $(this).prev().html()){
                                   $(this).parent().hide();
                               }
                               else{
                                   $('#titles').show();
                                   $(this).parent().show();
                               }
                           });
                     });
               });