Question

我有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。

Answer 1

您可以这样简单地添加更多参数。

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

Answer 2

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

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

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

＆＃13;

// 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);
        });
    });
});

＆＃13;

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

＆＃13;

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

2 个答案: