Titel nicht versteckt, wenn Änderung Drop-Down

Question

Ich blieb stecken, wenn ich Rolle Job von allen Rollen zu Engineering alle Tabelle nicht in der Engineering-Klasse ausblenden, aber wenn ich mich zu Analyst Rolle, Titel in Tabelle Analyst nicht zeigen statt Engineering-Titel immer zeigen wann Ändern Sie jedes Dropdown.

$("select.filterby").change(function() { 
 
    var filters = $.map($("select.filterby").toArray(), function(e) { 
 
\t return $(e).val(); 
 
    }).join("."); 
 
    var engineering = $("div#FilterContainer").find("h3, .third-title, .engineering, tr").hide(); 
 
    var analyst = $("div#FilterContainer").find("h3, .third-title, .analyst, tr").hide(); 
 

 
    if (analyst) { 
 
\t $("div#FilterContainer").find("h3.third-title.engineering, tr." + filters).show(); 
 
    } else if (engineering) { 
 
\t $("div#FilterContainer").find("h3.third-title.analyst, tr." + filters).show(); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
    <div id="FilterContainer" class="container"> 
 
    <h3 class="third-title all engineering">Engineering</h3> 
 
    <div class="row"> 
 
     <div class="col-md-12 col-sm-12 col-xs-12"> 
 
     <div class=""> 
 
      <table class="table"> 
 
      <tr class="all engineering technology full_time jakarta"> 
 
       <td style="width: 300px;"><a href="fe-dev.html">Front End Developer</a></td> 
 
       <td>Technology</td> 
 
       <td>Full time</td> 
 
       <td>Jakarta</td> 
 
      </tr> 
 
      <tr class="all engineering technology intern jakarta"> 
 
       <td style="width: 300px;"><a href="fe-in-dev.html">Front End Developer</a></td> 
 
       <td>Technology</td> 
 
       <td>Intern</td> 
 
       <td>Jakarta</td> 
 
      </tr> 
 
      <tr class="all engineering technology full_time jakarta"> 
 
       <td style="width: 300px;"><a href="wp-dev.html">Wordpress Developer</a></td> 
 
       <td>Technology</td> 
 
       <td>Full time</td> 
 
       <td>Jakarta</td> 
 
      </tr> 
 
      <tr class="all engineering technology full_time jakarta"> 
 
       <td style="width: 300px;"><a href="ad-dev.html">Android Developer</a></td> 
 
       <td>Technology</td> 
 
       <td>Full time</td> 
 
       <td>Jakarta</td> 
 
      </tr> 
 
      <tr class="all engineering technology full_time jakarta"> 
 
       <td style="width: 300px;"><a href="ios-dev.html">IOS Developer</a></td> 
 
       <td>Technology</td> 
 
       <td>Full time</td> 
 
       <td>Jakarta</td> 
 
      </tr> 
 
      <tr class="all engineering technology full_time jakarta"> 
 
       <td style="width: 300px;"><a href="be-dev.html">Back End Developer</a></td> 
 
       <td>Technology</td> 
 
       <td>Full time</td> 
 
       <td>Jakarta</td> 
 
      </tr> 
 
      <tr class="all engineering technology intern jakarta"> 
 
       <td style="width: 300px;"><a href="be-in-dev.html">Back End Developer</a></td> 
 
       <td>Technology</td> 
 
       <td>Intern</td> 
 
       <td>Jakarta</td> 
 
      </tr> 
 
      </table> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <h3 class="third-title all analyst">Analyst</h3> 
 
    <div class="row"> 
 
     <div class="col-md-12 col-sm-12 col-xs-12"> 
 
     <div class=""> 
 
      <table class="table"> 
 
      <tr class="all analyst technology full_time jakarta"> 
 
       <td style="width: 300px;"><a href="sa.html">System Analyst</a></td> 
 
       <td>Technology</td> 
 
       <td>Full time</td> 
 
       <td>Jakarta</td> 
 
      </tr> 
 
      <tr class="all analyst technology intern jakarta"> 
 
       <td style="width: 300px;"><a href="sa-in.html">System Analyst</a></td> 
 
       <td>Technology</td> 
 
       <td>Intern</td> 
 
       <td>Jakarta</td> 
 
      </tr> 
 
      </table> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div>

musste ich versuchen, wenn sonst zu erstellen, wenn die Bedingung, die ich erklären Analytiker und Engineering als Parameter ist dann Titel der einzelnen Abschnitte Analyst und Engineering verstecken.

Aktualisiert.

<select class="form-control filterby"> 
    <option value="all">All roles</option> 
    <option value="accounting">Accounting</option> 
    <option value="administrative">Administrative</option> 
    <option value="analyst">Analyst</option> 
    <option value="engineering">Engineering</option> 
    <option value="product">Product</option> 
    <option value="marketing_sales">Marketing and Sales</option> 
</select> 

Answer 1

Hier ist der aktualisierte Code. Versuchen Sie, und überprüfen:

$("select.filterby").change(function() { 
 
    $("div#FilterContainer").find("h3,tr").hide(); 
 
    $("div#FilterContainer").find("h3." + $(this).val() + ",tr." + $(this).val()).show(); 
 
    
 
    $("#no-result-container").hide(); 
 
    if($("div#FilterContainer").find("h3." + $(this).val() + ",tr." + $(this).val()).length == 0) { 
 
    $("#no-result-container").show(); 
 
    } 
 
});

#no-result-container { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select class="form-control filterby"> 
 
    <option value="all">All roles</option> 
 
    <option value="accounting">Accounting</option> 
 
    <option value="administrative">Administrative</option> 
 
    <option value="analyst">Analyst</option> 
 
    <option value="engineering">Engineering</option> 
 
    <option value="product">Product</option> 
 
    <option value="marketing_sales">Marketing and Sales</option> 
 
</select> 
 
<div id="FilterContainer" class="container"> 
 
    <div id="no-result-container" class="container"> No search parameter in here.</div> 
 
    <h3 class="third-title all engineering">Engineering</h3> 
 
    <div class="row"> 
 
    <div class="col-md-12 col-sm-12 col-xs-12"> 
 
     <div class=""> 
 
     <table class="table"> 
 
      <tr class="all engineering technology full_time jakarta"> 
 
      <td style="width: 300px;"><a href="fe-dev.html">Front End Developer</a></td> 
 
      <td>Technology</td> 
 
      <td>Full time</td> 
 
      <td>Jakarta</td> 
 
      </tr> 
 
      <tr class="all engineering technology intern jakarta"> 
 
      <td style="width: 300px;"><a href="fe-in-dev.html">Front End Developer</a></td> 
 
      <td>Technology</td> 
 
      <td>Intern</td> 
 
      <td>Jakarta</td> 
 
      </tr> 
 
      <tr class="all engineering technology full_time jakarta"> 
 
      <td style="width: 300px;"><a href="wp-dev.html">Wordpress Developer</a></td> 
 
      <td>Technology</td> 
 
      <td>Full time</td> 
 
      <td>Jakarta</td> 
 
      </tr> 
 
      <tr class="all engineering technology full_time jakarta"> 
 
      <td style="width: 300px;"><a href="ad-dev.html">Android Developer</a></td> 
 
      <td>Technology</td> 
 
      <td>Full time</td> 
 
      <td>Jakarta</td> 
 
      </tr> 
 
      <tr class="all engineering technology full_time jakarta"> 
 
      <td style="width: 300px;"><a href="ios-dev.html">IOS Developer</a></td> 
 
      <td>Technology</td> 
 
      <td>Full time</td> 
 
      <td>Jakarta</td> 
 
      </tr> 
 
      <tr class="all engineering technology full_time jakarta"> 
 
      <td style="width: 300px;"><a href="be-dev.html">Back End Developer</a></td> 
 
      <td>Technology</td> 
 
      <td>Full time</td> 
 
      <td>Jakarta</td> 
 
      </tr> 
 
      <tr class="all engineering technology intern jakarta"> 
 
      <td style="width: 300px;"><a href="be-in-dev.html">Back End Developer</a></td> 
 
      <td>Technology</td> 
 
      <td>Intern</td> 
 
      <td>Jakarta</td> 
 
      </tr> 
 
     </table> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <h3 class="third-title all analyst">Analyst</h3> 
 
    <div class="row"> 
 
    <div class="col-md-12 col-sm-12 col-xs-12"> 
 
     <div class=""> 
 
     <table class="table"> 
 
      <tr class="all analyst technology full_time jakarta"> 
 
      <td style="width: 300px;"><a href="sa.html">System Analyst</a></td> 
 
      <td>Technology</td> 
 
      <td>Full time</td> 
 
      <td>Jakarta</td> 
 
      </tr> 
 
      <tr class="all analyst technology intern jakarta"> 
 
      <td style="width: 300px;"><a href="sa-in.html">System Analyst</a></td> 
 
      <td>Technology</td> 
 
      <td>Intern</td> 
 
      <td>Jakarta</td> 
 
      </tr> 
 
     </table> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>