Javascript 使用jQuery筛选具有三个select输入的表_Javascript_Jquery_Html

Javascript 使用jQuery筛选具有三个select输入的表

javascript jquery html

Javascript 使用jQuery筛选具有三个select输入的表,javascript,jquery,html,Javascript,Jquery,Html,我有3个，我想从中筛选一个表，同时使用它们的选项相互筛选。我将首先向您展示代码： <!doctype html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> </head> <body> <div>

我有3个，我想从中筛选一个表，同时使用它们的选项相互筛选。我将首先向您展示代码：

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

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

您可以这样简单地放置更多参数

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

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

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

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

//Helper函数：返回满足3中条件的行 //选择框。可选参数可以指定一个选择框 //以及使用哪个值来代替该选择框中的选定值函数getRowsoverride，值{ var过滤器=表tbody tr td； $A、B、C.每个功能{ var test=this==override？值：$this.val；如果测试！==烤面包过滤器+=：包含+测试+； }; 返回$filter.parent； } $'A，B，C'。关于'change'，函数{ $'table tbody tr'。隐藏； getRows.show； $'A，B，C'。每个函数i，选择{ $'option'，this.eachfunction{ $this.togglegetRowsselect，$this.text.length>0； }; }; }; 选择一种类型烤面包 A1 A2 A3 选择B型烤面包地下一层地下二层地下三层 B4 B5 B6 选择C类型烤面包 C1 C2 C3 补体第四成份碳五 C6 C7 C8 C9 C10 A1、B1、C1 A1、B1、C2 A1、B1、C3 A1、B2、C4 A1、B2、C5 A1、B3、C6 A2、B4、C7 A2、B5、C8 A2、B5、C9 A3、B6、C10

注意，这里的代码需要使用{}块格式化工具或反勾号进行格式化。您的代码中有相当一部分是不可见的，因为这些代码没有被使用。我已经把它们修好了，但是如果你能在下一个问题中利用它们，那会有很大帮助。谢谢这不是我要找的。例如，如果我选择值为A3的选项，我只想显示包含A3的td，同时在其他两个选项中显示只选择包含在已经显示的td中的选项。因此，在本例中，如果我选择A3，则会显示带有A3、B6、C10的td，如果我想从B选择字段中选择某个选项，则只能有一个选项：B6，在C中，仅选择一个选项：C10。希望我现在说得更清楚。谢谢你的回复。这太棒了！非常感谢。它解决了我99%的问题。如果我想在任何更改上显示：none和Toate选项，我将如何操作？我试了一段时间，但没有找到答案。现在它显示：除了第一个有烤面包的，没有正确的选项，我想让它也消失。帮助？隐藏Toate的后果是，一旦用户选择了三个值，并且没有更多的Toate可用，他们将无法改变主意。查看添加$'option:containsToate'，this.remove；作为单击处理程序的第一行。这似乎不是个好主意。太好了！工作起来很有魅力！感谢您的耐心、时间和知识！

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