使用一个输入字段和一个 Select 对 HTML 表格进行排序 - Javascript

Question

This script works for sorting an HTML Table using two standard input fields, but I am trying to use a select as the second input field and I cant seem to find a way to call the function onchange for the select specialtyid id to work as an input. Please help. Thank you very much!

Here is the code:

<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

Here is few things to change:

1. Change the selctor #table for table
2. Change the condition to fit with your variables (infovalue === '') && (specialtyvalue === '')
3. Create a function to attach on both events
4. Add the event $('#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>