如何创建下拉列表以过滤特定列中的行

Question

我有一个包含 600 多行数据的表。此表的列标题是名称、办公室、地址、Primary_Role、Secondary_Role、Other_Role。我想在我的 HTML 中创建一个下拉菜单，该下拉菜单将每个唯一角色作为选项，并将通过 Primary_Role、Secondary_Role 和 Other_Role 进行过滤。到目前为止，我已经创建了一个下拉菜单，其中包含每个独特的角色作为选项，但我不确定如何将其连接到表格，以便在选择选项后获得所需的结果。

HTML 代码

<object align= middle>
      <div class="col-sm-5">
        <div class="filter-group">
          <label>Desired Role</label>
          <select id="mylist" onchange="myFunction()" class="form-control" >
              <option>None</option>
              <option>Assistant</option>
              <option>Associate</option>
              <option>Compliance Officer for Finance and Administration</option>
              <option>Compliance Officer for Legal Practice</option>
              <option>Consultant</option>
              <option>Designated Partner</option>
              <option>Director</option>
              <option>Employee</option>
              <option>In-house Solicitor</option>
              <option>Locum</option>
              <option>Member</option>
              <option>Non-member Partner</option>
              <option>Partner</option>
              <option>Professional Support Lawyer</option>
              <option>Prosecutor</option>
              <option>Role not specified</option>
              <option>SRA-approved manager - Director</option>
              <option>SRA-approved manager - Member</option>
              <option>SRA-approved manager - Partner</option>
              <option>SRA-approved manager - Sole Practitioner</option>
          </select>
        </div>
        <span class="filter-icon"><i class="fa fa-filter"></i></span>
      </div>
    </object>
    </div>
    </div>
    <form method="post">
        <table id="tlaw" class="table table-striped">
            <thead>
              <tr>
                  <th>Solicitor</th>
                  <th>Office</th>
                  <th>Address</th>
                  <th>Primary_Role</th>
                  <th>Secondary_Role</th>
                  <th>Other_Role</th>
                  <th>Other_Role_1</th>
              </tr>
            </thead>
            <tbody id="tls_table">
              <tr>
                {% block content %}

                {% endblock %}
              </tr>
            </tbody>
          </table>
        </div>
    </form>
  </div> 

<script>
    function myFunction() {
    var input, filter, table, tr, td, i;
    input = document.getElementById("mylist");
    filter = input.value.toUpperCase();
    table = document.getElementById("tlaw");
    tr = table.getElementsByTagName("tr");
    for (i = 0; i < tr.length; i++) {
        td = tr[i].getElementsByTagName("td")[0];
        if (td) {
        if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
            tr[i].style.display = "";
        } else {
            tr[i].style.display = "none";
        }
        }       
    }
    }
  </script>          

Answer 1

在选项值选择之后，使用任何方法（get 或 post）传递一个 ajax，并在该更新表之后发送您想要发送的日期或值。 或者另一种方法是在选择选项更新当前 url 与 "?key="value" 并检索数据后