使用jQuery的三个选择输入的过滤表

我有3个 <select>，我想从中过滤一个表，同时使用他们的选项互相过滤。我将首先向您显示代码：

<!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>

和我设法完成的脚本是：

        $('#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");
        })

如果选择例如A1，我想在表中显示所有包含A1的TD，如果我选择A2显示所有包含A2的TD，依此类推。到目前为止，我的代码做到了。问题在于我也想限制其他选择。例如，如果我选择C10，则在第一个选择中，我应该只能选择A3和第二个B6。

您可以使用以下代码。它具有辅助功能，该功能将根据3个选择框中的3个选定值构建CSS选择器。该函数可以接受参数，在这种情况下，可以为一个选择框做异常。然后，CSS选择器将使用指定的值，而不是该特定选择框中的选定值。

该函数将应用该CSS选择器并返回匹配的行。

点击处理程序将首先使用上面的功能仅显示与三个选定值相匹配的表中的行。然后，它将检查选择框中的哪个值可以与其他两个选定值结合以找到至少一行，再次使用上述辅助函数：

// 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>

您可以简单地以这种方式放置更多参数。

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

相关内容

最新更新

热门标签：