Filter table with three select inputs using jQuery

问题

I have 3 <select> from which I would like to filter a table and at the same time filter each other using their options. I will first show you the code:

<!doctype html>
<html>

  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  </head>

  <body>
    <div>

      Select A type
      <select id="A">
        <option>Toate</option>
        <option>A1</option>
        <option>A2</option>
        <option>A3</option>
      </select>

    </div>

    <div>
      Select B type
      <select id="B">
        <option>Toate</option>
        <option>B1</option>
        <option>B2</option>
        <option>B3</option>
        <option>B4</option>
        <option>B5</option>
        <option>B6</option>
      </select>
    </div>

    <div>
      Select C type
      <select id="C">
        <option>Toate</option>
        <option>C1</option>
        <option>C2</option>
        <option>C3</option>
        <option>C4</option>
        <option>C5</option>
        <option>C6</option>
        <option>C7</option>
        <option>C8</option>
        <option>C9</option>
        <option>C10</option>
      </select>
    </div>
    <br/>
    <table id="X">
      <thead>
      </thead>
      <tbody>
        <tr>
          <td>A1,B1,C1</td>
        </tr>
        <tr>
          <td>A1,B1,C2</td>
        </tr>
        <tr>
          <td>A1,B1,C3</td>
        </tr>
        <tr>
          <td>A1,B2,C4</td>
        </tr>
        <tr>
          <td>A1,B2,C5</td>
        </tr>
        <tr>
          <td>A1,B3,C6</td>
        </tr>
        <tr>
          <td>A2,B4,C7</td>
        </tr>
        <tr>
          <td>A2,B5,C8</td>
        </tr>
        <tr>
          <td>A2,B5,C9</td>
        </tr>
        <tr>
          <td>A3,B6,C10</td>
        </tr>
      </tbody>
    </table>
  </body>

</html>

and the script I managed to pull off so far is this:

        $('#A,#B,#C').on('change', function() {
          $('table tbody tr td').css("display", "none");
          var optiuneaSelectata = this.value;
          $('table tbody tr td:contains("' + optiuneaSelectata + '")').css("display", "table-cell");
        })

If I choose for example A1, I want to show in the table all the td that contain A1, if I choose A2 show all the td that contain A2 and so on. My code does just that so far. The problem is that I want to restrict the other selects too. For example if I choose C10, in the first select I should only be able to choose A3 and in the second one B6.

回答1:

You could use the following code. It has a helper function which will build a CSS selector based on the 3 selected values in the 3 select boxes. The function can accept parameters in which case an exception can be made for one select box. The CSS selector will then use a specified value instead of the selected value in that particular select box.

The function will apply that CSS selector and return the rows that match.

The click handler will first use the above function to show only the rows in the table that match the three selected values. Then it will check which values in a select box can be combined with the two other selected values to find at least one row, again using the above helper function:

// Helper function: returns rows that meet the condition in the 3
// select boxes. The optional arguments can specify one of the select boxes
// and which value to use instead of the selected value in that select box
function getRows(override, value) {
    var filter = "table tbody tr td";
    $("#A,#B,#C").each(function() {
        var test = this === override ? value : $(this).val();
        if (test !== "Toate") filter += ":contains(" + test + ")"; 
    });
    return $(filter).parent();
}

$('#A,#B,#C').on('change', function() {
    $('table tbody tr').hide();
    getRows().show();
    $('#A,#B,#C').each(function (i, select) {
        $('option', this).each(function () {
            $(this).toggle(getRows(select, $(this).text()).length > 0);
        });
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  Select A type
  <select id="A">
    <option>Toate</option>
    <option>A1</option>
    <option>A2</option>
    <option>A3</option>
  </select>
</div>

<div>
  Select B type
  <select id="B">
    <option>Toate</option>
    <option>B1</option>
    <option>B2</option>
    <option>B3</option>
    <option>B4</option>
    <option>B5</option>
    <option>B6</option>
  </select>
</div>

<div>
  Select C type
  <select id="C">
    <option>Toate</option>
    <option>C1</option>
    <option>C2</option>
    <option>C3</option>
    <option>C4</option>
    <option>C5</option>
    <option>C6</option>
    <option>C7</option>
    <option>C8</option>
    <option>C9</option>
    <option>C10</option>
  </select>
</div>
<br/>
<table id="X">
  <thead>
  </thead>
  <tbody>
    <tr>
      <td>A1,B1,C1</td>
    </tr>
    <tr>
      <td>A1,B1,C2</td>
    </tr>
    <tr>
      <td>A1,B1,C3</td>
    </tr>
    <tr>
      <td>A1,B2,C4</td>
    </tr>
    <tr>
      <td>A1,B2,C5</td>
    </tr>
    <tr>
      <td>A1,B3,C6</td>
    </tr>
    <tr>
      <td>A2,B4,C7</td>
    </tr>
    <tr>
      <td>A2,B5,C8</td>
    </tr>
    <tr>
      <td>A2,B5,C9</td>
    </tr>
    <tr>
      <td>A3,B6,C10</td>
    </tr>
  </tbody>
</table>

回答2:

You can simply put more parameters this way.

$("table tbody tr td:contains('A1'):contains('B1'):contains('C1')").css( "text-decoration", "underline" );

来源：https://stackoverflow.com/questions/45990106/filter-table-with-three-select-inputs-using-jquery

标签

javascript

jquery

html