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

在选项值选择之后，使用更新方法之后的任何方法（获取或发布）以及要发送的日期或值传递一个ajax。或者以其他方式是选择选项后，使用“？key =“ value”更新当前网址并检索数据

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

1 个答案: