Как создать раскрывающийся список для фильтрации строк в определенных столбцах

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 с любым методом (get или post) и датой или значением, которое вы хотите отправить после этой таблицы обновлений. или другой способ - после выбора опции обновить текущий URL с помощью?? key = "value" и получить данные