Блог

У меня есть таблица с более чем 600 строками данных. Заголовками столбцов для этой таблицы являются Name, Office, Address, 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>          
  

После значения параметра выберите передать ajax любым методом (get или post) и датой или значением, которое вы хотите отправить после этого обновления таблицы. или другой способ — после выбора опции обновить текущий URL с помощью «?key =»value» и получить данные