使用一個輸入字段和一個 Select 對 HTML 表格進行排序 - Javascript

Question

此腳本適用於使用兩個標准輸入字段對 HTML 表進行排序，但我嘗試使用 select 作為第二個輸入字段，但我似乎無法找到一種方法來調用函數 onchange 以將 select specialid id 用作輸入. 請幫忙。 非常感謝！

這是代碼：

<script src="https://code.jquery.com/jquery-1.7.1.js"></script>
<input type="text" id="infoid" placeholder="Contractor Name">

<select id="specialtyid" onChange=" ">
  <option value="">Select Contractor Type:</option>
  <option value="Electrician">Electrician</option>
  <option value="HVAC">HVAC</option>
  <option value="Plumber">Plumber</option>
</select>
<p></p>
<table id="table">
  <tr>
    <td>Jack Doe</td>
    <td>HVAC</td>
  </tr>
  <tr>
    <td>Jack Doe JR</td>
    <td>Plumber</td>
  </tr>
  <tr>
    <td>Jane Doe</td>
    <td>Electrician</td>
  </tr>
  <tr>
    <td>Rick Pro</td>
    <td>Plumber</td>
  </tr>
</table>

$(window).load(function() {
  var $rows = $('#table tr'),
    info,
    specialty;

  $('input').keyup(function() {
    infovalue = $('#infoid').val().toLowerCase(),
      specialtyvalue = $('#specialtyid').val().toLowerCase();
    $rows.each(function(index, tr) {
      info = $(tr).find('td:nth-of-type(1)').text().toLowerCase(),
        specialty = $(tr).find('td:nth-of-type(2)').text().toLowerCase();
      if ((info.indexOf(infovalue) != -1) && (specialty.indexOf(specialtyvalue) != -1)) {
        $(this).show();
      } else {
        $(this).hide();
      }
    });
    if ((searchVal1 === '') && (searchVal2 === '')) {
      $rows.show();
    }
  });
});

Answer 1

這里有幾件事情需要改變：

1. 更改table的選擇器#table
2. 更改條件以適合您的變量(infovalue === '') && (specialtyvalue === '')
3. 創建一個函數來附加兩個事件
4. 添加事件$('#specialtyid').change(filterTable);

 $(window).load(function() { var $rows = $('table tr'), info, specialty; function filterTable(){ infovalue = $('#infoid').val().toLowerCase(), specialtyvalue = $('#specialtyid').val().toLowerCase(); $rows.each(function(index, tr) { info = $(tr).find('td:nth-of-type(1)').text().toLowerCase(), specialty = $(tr).find('td:nth-of-type(2)').text().toLowerCase(); if ((info.indexOf(infovalue) != -1) && (specialty.indexOf(specialtyvalue) != -1)) { $(this).show(); } else { $(this).hide(); } }); if ((infovalue === '') && (specialtyvalue === '')) { $rows.show(); } } $('input').keyup(filterTable); $('#specialtyid').change(filterTable); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script> <input type="text" id="infoid" placeholder="Contractor Name"> <select id="specialtyid" onChange=" "> <option value="">Select Contractor Type:</option> <option value="Electrician">Electrician</option> <option value="HVAC">HVAC</option> <option value="Plumber">Plumber</option> </select> <p></p> <table> <tr> <td>Jack Doe</td> <td>HVAC</td> </tr> <tr> <td>Jack Doe JR</td> <td>Plumber</td> </tr> <tr> <td>Jane Doe</td> <td>Electrician</td> </tr> <tr> <td>Rick Pro</td> <td>Plumber</td> </tr> </table>