选择选项滤波器普通JavaScript

Question

我想添加一个选择的选项过滤器，这意味着如果表格与所选选项的值不匹配，则表本身将隐藏TD。对于我来说，编写一个用于搜索输入过滤器的代码并不是问题，但是我被Select Option Option Filter所困扰。任何知道我如何解决的人。仅在普通的JavaScript中，不允许其他框架。

function filterDepartment() {
  var selectJob = document.getElementById("selectJob"),
    table = document.getElementById("myTable"),
    tr = table.getElementsByTagName("tr");
  for (var i = 0; i < tr.length; i++) {
    department = tr[i].getElementsByTagName("td")[1];
    console.log(department);
    if (department) {
      if (department.innerHTML.indexOf() > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    }
  }
}
document.addEventListener("change", filterDepartment);

<div class="article-block">
  <div class="inner-block">
    <div class="tabel-block">
      <div class="three-column column-padding search-bar">
        <select name="department" id="selectJob" />
        <option value="All Department" selected="selected">All Departments</option>
        <option value="Europe">Europe</option>
        <option value="Asia">Asia</option>
        </select>
      </div>
      <table id="myTable">
        <tr>
          <th class="table-header">Department</th>
        </tr>
        <tr>
          <td>Europe</td>
        </tr>
        <tr>
          <td>Europe</td>
        </tr>
        <tr>
          <td>Europe</td>
        </tr>
        <tr>
          <td>Asia</td>
        </tr>
        <tr>
          <td>Asia</td>
        </tr>c
        <tr>
          <td>Asia</td>
        </tr>
        <tr>
          <td>Asia</td>
        </tr>
        <tr>
          <td>Asia</td>
        </tr>
      </table>
    </div>
  </div>
</div>

Answer 1

1. 您想在单元1上过滤，但单元格在0
开始
2. 您需要调用Select document.getElementById("selectJob").addEventListener("change", filterDepartment);的函数on Clangange
3. 您需要测试有一些选择以显示所有部门
4. 我也从您的html中删除了一个流浪c

function filterDepartment() {
    var table = document.getElementById("myTable"),
    tr = table.getElementsByTagName("tr"),
    selected = this.value;
  for (var i = 1; i < tr.length; i++) {
    var department = tr[i].cells[0].innerHTML;
    if (department) {
      tr[i].style.display=selected=="" || department.indexOf(selected) > -1 ?"":"none";
    }
  }
}
window.onload=function() { // or addEventListener/attachEvent
  document.getElementById("selectJob").addEventListener("change", filterDepartment);
  
}

<div class="article-block">
  <div class="inner-block">
    <div class="tabel-block">
      <div class="three-column column-padding search-bar">
        <select name="department" id="selectJob" />
        <option value="" selected="selected">All Departments</option>
        <option value="Europe">Europe</option>
        <option value="Asia">Asia</option>
        </select>
      </div>
      <table id="myTable">
        <tr>
          <th class="table-header">Department</th>
        </tr>
        <tr>
          <td>Europe</td>
        </tr>
        <tr>
          <td>Europe</td>
        </tr>
        <tr>
          <td>Europe</td>
        </tr>
        <tr>
          <td>Asia</td>
        </tr>
        <tr>
          <td>Asia</td>
        </tr>
        <tr>
          <td>Asia</td>
        </tr>
        <tr>
          <td>Asia</td>
        </tr>
        <tr>
          <td>Asia</td>
        </tr>
      </table>
    </div>
  </div>
</div>

Answer 2

function filterDepartment() {
    var selectJob = document.getElementById("selectJob"), 
        table = document.getElementById("myTable"),
        tr = table.getElementsByTagName("tr");
    for(var i = 0; i < tr.length; i++) {
        department = tr[i].getElementsByTagName("td")[0]; // use [0] as the first `td`
        console.log(department);
        if(department && department.innerHTML.indexOf(selectJob.value) > -1) {
            tr[i].style.display = "";
        } else {
            tr[i].style.display = "none";   
        }
    }
}
// listen to select changes
  document.querySelector('#selectJob').addEventListener('change', function(e) {
    filterDepartment();
  });