如何使用select tag <select>对表列进行排序？

Question

我正在尝试对表中的列进行排序。我可以通过单击表标题对表列进行排序(使用此$('th').click(function(){ ) )，但我想使用select选项对表列进行排序，但我无法这样做。

我在select选项中使用了一个类sort-item，然后在jquery中使用了那个sort-item类，但它不起作用……你能帮帮我吗？

​

$('sort-item').click(function(){
    var table = $(this).parents('table').eq(0)
    var rows = table.find('tr:gt(0)').toArray().sort(comparer($(this).index()))
    this.asc = !this.asc
    if (!this.asc){rows = rows.reverse()}
    for (var i = 0; i < rows.length; i++){table.append(rows[i])}
})
function comparer(index) {
    return function(a, b) {
        var valA = getCellValue(a, index), valB = getCellValue(b, index)
        return $.isNumeric(valA) && $.isNumeric(valB) ? valA - valB : valA.toString().localeCompare(valB)
    }
}
function getCellValue(row, index){ return $(row).children('td').eq(index).text() }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>



<div class="btn-group ">
  <div class="sort">Sort : </div>
 <select class="sort">
    <option value="0">All</option>
    <option class="sort-item" value="1">Received</option>
    <option class="sort-item" value="2">Due</option>
    
  </select>
</div>


<div class="table zui-wrapper table-responsive " >
  <div class="zui-scroller ">
    <table id="indextable" 
      class="zui-table table "
    >
      <thead>
        <tr>
          <th scope="col" class="zui-sticky-col">Name</th>
          <th scope="col">id</th>
          <th scope="col">Complexity</th>
          <th scope="col">Received</th>
          <th scope="col">Language</th>
          <th scope="col">Status</th>
          <th scope="col" class="float-right">Due </th>
        </tr>
      </thead>

      <tbody>
        <tr>
                <td class="zui-sticky-col">
                  <a>
                  A</a>
                </td>
            

            <td><a>123456789</a></td>
            <td><a>Medium</a></td>
            <td><a>01/01/20</a></td>
            <td><a>French</a></td>
            <td><a>Designed By A</a>
            </td>
            <td ><a>1/05/20</a>
            </td>
      
        </tr>

        <tr>
          <td  class=" zui-sticky-col">
           
            <a >B</a>
         
          </td>
          <td><a>12345678</a></td>
          <td><a>Medium</a></td>
          <td><a>02/05/20</a></td>
          <td><a>French</a></td>
          <td><a>Designed By j</a></td>
          <td>
            <a>2/05/20</a>
          </td>
        </tr>

        <tr>
          <td class="zui-sticky-col">
            <a>C</a>
          </td>
          <td><a>1234567</a></td>
          <td><a>Medium</a></td>
          <td><a>02/02/20</a></td>
          <td><a>French</a></td>
          <td><a>Designed By j</a></td>
          <td>
            <a> 12/05/20</a>
          </td>
        </tr>
        <tr>
          <td class=" zui-sticky-col">
            <a>D</a>
          </td>
          <td><a>123456</a></td>
          <td><a>Medium</a></td>
          <td><a>03/03/20</a></td>
          <td><a>French</a></td>
          <td><a>Designed by G</a></td>
          <td>
            <a>12/05/20</a>
          </td>
        </tr>



        <tr>
          <td class=" zui-sticky-col ">
            <a>E</a>
          </td>
          <td><a >12345</a></td>
          <td><a >Medium</a></td>
          <td><a>04/04/20</a></td>
          <td><a>French</a></td>
          <td><a>Designed by E</a></td>
          <td>
            <a>12/05/20</a>
          </td>
        </tr>

        <tr>
          <td class=" zui-sticky-col ">
            <a>F</a>
          </td>
          <td><a>1234</a></td>
          <td><a>Medium</a></td>
          <td><a>05/05/20</a></td>
          <td><a>French</a></td>
          <td><a >Designed by F</a></td>
          <td >
            <a> 12/05/20</a>
          </td>
        </tr>

        <tr>
          <td class="zui-sticky-col">
            <a >G</a>
          </td>
          <td><a>123</a></td>
          <td><a>Medium</a></td>
          <td><a>06/06/20</a></td>
          <td><a>French</a></td>
          <td><a>Designed by D</a></td>
          <td>
            <a>12/05/20</a>
          </td>
        </tr>

        <tr>
          <td class="zui-sticky-col ">
            <a>H</a>
          </td>
          <td><a >12</a></td>
          <td><a >Medium</a></td>
          <td><a >07/07/20</a></td>
          <td><a>French</a></td>
          <td><a>Designed by B</a></td>
          <td >
            <a> 12/05/20</a>
          </td>
        </tr>

        <tr>
          <td class="zui-sticky-col">
            <a >I</a>
          </td>
          <td><a >1</a></td>
          <td><a >Medium</a></td>
          <td><a >08/08/20</a></td>
          <td><a >French</a></td>
          <td><a >Designed by C</a></td>
          <td  style="float: right">
            <a>12/05/20</a>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

​

Answer 1

这个可以使用吗

$(".sort").change(function (){

});