更改下拉列表时不会隐藏标题

时间：2017-07-26 09:18:19

标签： javascript jquery select

当我将角色工作从所有角色更改为工程所有表而非工程类隐藏时，​​我陷入困境，但当我选择分析师角色时，表分析师中的标题不会显示工程标题，而是在更改每个下拉列表时显示。

$("select.filterby").change(function() {
  var filters = $.map($("select.filterby").toArray(), function(e) {
	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) {
	$("div#FilterContainer").find("h3.third-title.engineering, tr." + filters).show();
  } else if (engineering) {
	$("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>

我曾尝试创建if else if if我宣布分析师和工程师作为参数然后隐藏每个部分分析师和工程师的标题。

更新

<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>

1 个答案:

答案 0 :(得分：0)

这是更新的代码。试试看：

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

相关问题
最新问题