时间戳

首页 > 解决方案 > Jquery过滤选择框div

jquery - Jquery过滤选择框div

问题描述

我正在尝试创建一个“工作”过滤器，它将根据位置和部门过滤工作

首先，我显示按部门划分的所有工作，如下所示：

然后我希望只使用简单的 Jquery 和 CSS 用 2 个下拉选择框过滤它们

还添加了“无结果”选项，当没有组合时将显示

我认为我非常接近，但它仍然不能完美地与所有组合一起使用。想我错过了什么

$("select#locations").change(function() {
  // Get selected option value from dropdown
  let location = $(this).children("option:selected").val();
  let careerBox = $(".career-box");
  // $(".department").removeClass("hide");
  let departmentTitle = $(".department-title");
  // console.log(location);
  // Remove all selected classes first
  careerBox.removeClass("show");
  careerBox.removeClass("hide");
  $(".locations span").removeClass("selected");
  // Add selected class to selected location
  $('.locations span[data-location="' + location + '"]').addClass("selected");
  careerBox.each(function() {
    if (location != "all-locations") {
      // departmentTitle.addClass("hide");
      if ($(this).find(".locations span").hasClass("selected")) {
        $(this).addClass("show");
        departmentTitle.addClass("hide");
        $(this).siblings(".department-title").removeClass("hide");
        // $(this).siblings(departmentTitle).addClass("show");
      } else {
        $(this).addClass("hide");
      }
    } else {
      departmentTitle.removeClass("hide");
    }
  });
  // $(".filter select#departments").val("all-departments").trigger("change");
  // console.log($(".all-careers").height());
  if ($(".all-careers").height() > 1) {
    $(".no-results").removeClass("show");
  } else {
    $(".no-results").addClass("show");
  }
});



// Departments
$("#departments").change(function() {
  // Get selected option value from dropdown
  let departmentType = $(this).children("option:selected").val();
  // console.log(departmentType);
  let departmentBox = $(".department");
  $(".department").removeClass("selected").removeClass("show");
  $(".department").addClass("hide");

  departmentBox.each(function() {
    if (departmentType != "all-departments") {
      $('.department[data-department="' + departmentType + '"]').addClass(
        "selected show"
      );
      $('.department[data-department="' + departmentType + '"]').removeClass(
        "hide"
      );
    } else {
      $(".department")
        .removeClass("selected")
        .removeClass("show")
        .removeClass("hide");
    }
  });
  // No results
  // $(".filter select#locations").val("all-locations").trigger("change");
  // console.log($(".all-careers").height());
  if ($(".all-careers").height() > 1) {
    $(".no-results").removeClass("show");
  } else {
    $(".no-results").addClass("show");
  }
});

这是一个几乎完成的小提琴 https://jsfiddle.net/hamergil/x2b8s6mv/82/

如果有人可以帮助使其完美运行，我将不胜感激

谢谢

标签： jqueryfilter

解决方案

您可以检查下是否department有selected类，length > 0如果是，则使用addClass("show")显示部门的标题，否则隐藏整个departmentdiv。

演示代码： 

$("#locations").select2({
  width: "resolve",
  minimumResultsForSearch: Infinity,
});

$("#departments").select2({
  width: "resolve",
  minimumResultsForSearch: Infinity,
});



$("select#locations").change(function() {
  // Get selected option value from dropdown
  let location = $(this).children("option:selected").val();
  let careerBox = $(".career-box");
  $(".department").removeClass("hide"); //hide the title
  let departmentTitle = $(".department-title");
  // Remove all selected classes first
  careerBox.removeClass("show");
  careerBox.removeClass("hide");
  $(".locations span").removeClass("selected");
  // Add selected class to selected location
  $('.locations span[data-location="' + location + '"]').addClass("selected");
  if (location != "all-locations") {
    careerBox.each(function() {

      if ($(this).find(".locations span").hasClass("selected")) {
        $(this).addClass("show");
      } else {
        $(this).addClass("hide");
      }
      //check if the length of slected inside department is > 0
      if ($(this).closest(".department").find(".locations .selected").length > 0) {
        //show the title
        $(this).closest(".department-title").addClass("show").removeClass("hide");
      } else {
        //hide that div 
        $(this).closest(".department").addClass("hide").removeClass("show");
      }
    });
  } else {
    departmentTitle.removeClass("hide");
  }
  if ($(".all-careers").height() > 1) {
    $(".no-results").removeClass("show");
  } else {
    $(".no-results").addClass("show");
  }
});
.all-careers h2 {
  font-size: 1rem;
}

.all-careers .career-box .heading {
  cursor: pointer;
  padding: 15px 0;
  border-bottom: 1px solid #16063d;
}

.all-careers .career-box.show {
  display: block;
}

.all-careers .career-box.hide {
  display: none;
}

.all-careers .department .department-title.hide {
  display: none;
}

.all-careers .department.hide {
  display: none;
}

.all-careers .no-results.show {
  display: block;
}

.all-careers .career-box .wrap-info {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

.no-results {
  display: none;
}

.department-title {
  padding-top: 30px;
  font-weight: bold;
  font-size: 26px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/css/select2.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-beta.1/dist/js/select2.min.js"></script>

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <select id="locations">
        <option value="all-locations">All Locations</option>
        <option value="brazil">Brazil</option>
        <option value="israel">Israel</option>
        <option value="new-jersey">New Jersey</option>
        <option value="romania">Romania</option>
        <option value="singapore">Singapore</option>
        <option value="texas">Texas</option>
      </select>

      <select id="departments">
        <option value="all-departments">All Departments</option>
        <option value="customer-success-and-tech-ops">Customer Success and Tech Ops</option>
        <option value="marketing">Marketing</option>
        <option value="product-management">Product Management</option>
        <option value="rd-and-engineering">R&D and Engineering</option>
        <option value="sales">Sales</option>
      </select>
    </div>
    <div class="col-md-12">

      <div class="all-careers">
        <div class="no-results">No Results</div>
        <div class="department" data-department="customer-success-and-tech-ops">
          <div class="department-title">Customer Success and Tech Ops</div>
          <div class="career-box">
            <div class="heading d-flex align-items-center">
              <div class="wrap-info">
                <a href="#">
                  <h2>CS Production Engineer</h2>
                </a>
                <div class="locations"><span data-location="israel">Israel</span></div>
              </div><a id="career-btn" class="orange-btn" href="#">Apply</a>
            </div>
          </div>
          <div class="career-box">
            <div class="heading d-flex align-items-center">
              <div class="wrap-info">
                <a href="#">
                  <h2>Program Manager</h2>
                </a>
                <div class="locations"><span data-location="texas">Texas</span></div>
              </div><a id="career-btn" class="orange-btn" href="#">Apply</a>
            </div>
          </div>
          <div class="career-box">
            <div class="heading d-flex align-items-center">
              <div class="wrap-info">
                <a href="#">
                  <h2>SRE (Site Reliability Engineer)</h2>
                </a>
                <div class="locations"><span data-location="israel">Israel</span><span data-location="new-jersey">New Jersey</span><span data-location="texas">Texas</span></div>
              </div><a id="career-btn" class="orange-btn" href="#">Apply</a>
            </div>
          </div>
          <div class="career-box">
            <div class="heading d-flex align-items-center">
              <div class="wrap-info">
                <a href="#">
                  <h2>Junior PMO</h2>
                </a>
                <div class="locations"><span data-location="israel">Israel</span></div>
              </div><a id="career-btn" class="orange-btn" href="#">Apply</a>
            </div>
          </div>
          <div class="career-box">
            <div class="heading d-flex align-items-center">
              <div class="wrap-info">
                <a href="#">
                  <h2>Optimization Expert</h2>
                </a>
                <div class="locations"><span data-location="israel">Israel</span></div>
              </div><a id="career-btn" class="orange-btn" href="#">Apply</a>
            </div>
          </div>
          <div class="career-box">
            <div class="heading d-flex align-items-center">
              <div class="wrap-info">
                <a href="#">
                  <h2>PMO</h2>
                </a>
                <div class="locations"><span data-location="israel">Israel</span></div>
              </div><a id="career-btn" class="orange-btn" href="#">Apply</a>
            </div>
          </div>
          <div class="career-box">
            <div class="heading d-flex align-items-center">
              <div class="wrap-info">
                <a href="#">
                  <h2>RAN Automation Delivery Expert</h2>
                </a>
                <div class="locations"><span data-location="new-jersey">New Jersey</span><span data-location="texas">Texas</span></div>
              </div><a id="career-btn" class="orange-btn" href="#">Apply</a>
            </div>
          </div>
        </div>
        <div class="department" data-department="marketing">
          <div class="department-title">Marketing</div>
          <div class="career-box">
            <div class="heading d-flex align-items-center">
              <div class="wrap-info">
                <a href="#">
                  <h2>Product Marketing&nbsp;Manager</h2>
                </a>
                <div class="locations"><span data-location="israel">Israel</span></div>
              </div><a id="career-btn" class="orange-btn" href="#">Apply</a>
            </div>
          </div>
          <div class="career-box">
            <div class="heading d-flex align-items-center">
              <div class="wrap-info">
                <a href="#">
                  <h2>Field Marketing Manager</h2>
                </a>
                <div class="locations"><span data-location="new-jersey">New Jersey</span><span data-location="singapore">Singapore</span><span data-location="texas">Texas</span></div>
              </div><a id="career-btn" class="orange-btn" href="#">Apply</a>
            </div>
          </div>
        </div>
        <div class="department" data-department="product-management">
          <div class="department-title">Product Management</div>
          <div class="career-box">
            <div class="heading d-flex align-items-center">
              <div class="wrap-info">
                <a href="#">
                  <h2>Product Expert</h2>
                </a>
                <div class="locations"><span data-location="romania">Romania</span></div>
              </div><a id="career-btn" class="orange-btn" href="#">Apply</a>
            </div>
          </div>
        </div>
        <div class="department" data-department="rd-and-engineering">
          <div class="department-title">R&amp;D and Engineering</div>
          <div class="career-box">
            <div class="heading d-flex align-items-center">
              <div class="wrap-info">
                <a href="#">
                  <h2>Quality Assurance (QA) Manager</h2>
                </a>
                <div class="locations"><span data-location="israel">Israel</span></div>
              </div><a id="career-btn" class="orange-btn" href="#">Apply</a>
            </div>
          </div>
          <div class="career-box">
            <div class="heading d-flex align-items-center">
              <div class="wrap-info">
                <a href="#">
                  <h2>Senior Java Developer</h2>
                </a>
                <div class="locations"><span data-location="israel">Israel</span></div>
              </div><a id="career-btn" class="orange-btn" href="#">Apply</a>
            </div>
          </div>
        </div>
        <div class="department" data-department="sales">
          <div class="department-title">Sales</div>
          <div class="career-box">
            <div class="heading d-flex align-items-center">
              <div class="wrap-info">
                <a href="#">
                  <h2>Business Development Director</h2>
                </a>
                <div class="locations"><span data-location="new-jersey">New Jersey</span><span data-location="texas">Texas</span></div>
              </div><a id="career-btn" class="orange-btn" href="#">Apply</a>
            </div>
          </div>
          <div class="career-box">
            <div class="heading d-flex align-items-center">
              <div class="wrap-info">
                <a href="#">
                  <h2>Regional Sales Director</h2>
                </a>
                <div class="locations"><span data-location="brazil">Brazil</span></div>
              </div><a id="career-btn" class="orange-btn" href="#">Apply</a>
            </div>
          </div>
        </div>
      </div>




    </div>


  </div>
</div>

推荐阅读