选择选项过滤纯JavaScript

Question

我想添加一个选择选项过滤器，这意味着如果表格本身与所选选项的值不匹配，则会隐藏td。编写搜索输入过滤器的代码对我来说不是问题，但我坚持使用选择选项过滤器。任何知道如何修复的人。仅在纯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);的更改函数
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();
  });