タイトルが変更されたときに隠れていない

Question

私はすべてのロールからエンジニアリングクラスhide以外のエンジニアリングにすべてのロールからロールジョブを変更してしまいましたが、アナリストの役割を選択すると、各ドロップダウンを変更します。

$("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>

私は他の場合、私は、パラメータとして、アナリストやエンジニアリングを宣言された条件は、各セクションのアナリストとエンジニアリングのタイトルを隠す場合は作成してみてくださいました。

更新されました。

<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

ここには更新されたコードがあります。試してみて、確認してください。

`あなたのHTMLにselect.filterby`さ

$("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>