Question

我有以下代码，试图仅显示包含所有3个选择器中的值的行。

但是，如果我从第二个选择器中的第一个选择器中选择“ A1”，那么我将如何做到这一点，只有“ B1-B3”和“ C1-C6”可见，然后我还要为BI希望这样做，以便在选择器n3中仅可见与Ax和Bx匹配的C值。

基于行内容的某种自动完成功能。

JS

$(document).ready(function() {
    $('#selectContainer select').change(function() {
      const filter = [$('#selA').val(), $('#selB').val(), $('#selC').val()];
      $('#table tr').each(function() {
        $(this).show();
        $('td', this).each(function(i) {
          const text = $(this).text().toLowerCase();
          if (text.indexOf(filter[i]) === -1) {
            $(this).closest('tr').hide();
          }
        })
      })
    });
  });

HTML

<!doctype html>
<html lang="en">
  <head>
    <!-- Req meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="styles.css">

    <title>Tema 2</title>
  </head>
  <body>
      <script src="http://code.jquery.com/jquery-3.4.0.js"integrity="sha256-DYZMCC8HTC+QDr5QNaIcfR7VSPtcISykd+6eSmBW5qo="crossorigin="anonymous"></script>
    <div class="row align-center">
        <div class="col-lg-4 col-centered shadow p-3 mb-5 bg-white rounded">
            <h1>Tema 2</h1>
          <div  id="selectContainer">
            <span>A:</span><select id="selA">
                <option value="">Toate</option>
                <option value="a1">A1</option>
                <option value="a2">A2</option>
                <option value="a3">A3</option>
              </select><br><br>
              <span>B:</span><select id="selB">
                  <option value="">Toate</option>
                  <option value="b1">B1</option>
                  <option value="b2">B2</option>
                  <option value="b3">B3</option>
                  <option value="b4">B4</option>
                  <option value="b5">B5</option>
                  <option value="b6">B6</option>
                </select><br><br>
                <span>C:</span> <select id="selC">
                    <option value="">Toate</option>
                    <option value="c1">C1</option>
                    <option value="c2">C2</option>
                    <option value="c3">C3</option>
                    <option value="c4">C4</option>
                    <option value="c5">C5</option>
                    <option value="c6">C6</option>
                    <option value="c7">C7</option>
                    <option value="c8">C8</option>
                    <option value="c9">C9</option>
                    <option value="c10">C10</option>
                  </select> 
            </div>
          <table class="table table-bordered" id="table">
            <thead>
              <tr>
                <th>A</th>
                <th>B</th>
                <th>C</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>A1</td>
                <td>B1</td>
                <td>C1</td>
              </tr>
              <tr>
                <td>A1</td>
                <td>B1</td>
                <td>C2</td>
              </tr>
              <tr>
                <td>A1</td>
                <td>B1</td>
                <td>C3</td>
                </tr>
              <tr>
                <td>A1</td>
                <td>B2</td>
                <td>C4</td>
              </tr>
              <tr>
                <td>A1</td>
                <td>B2</td>
                <td>C5</td>
            </tr>
             <tr>
              <td>A1</td>
              <td>B3</td>
              <td>C6</td>
            </tr>
            <tr>
              <td>A2</td>
              <td>B4</td>
              <td>C7</td>
            </tr>
            <tr>
              <td>A2</td>
              <td>B5</td>
              <td>C8</td>
            </tr>  
            <tr>
               <td>A2</td>
               <td>B5</td>
               <td>C9</td>
            </tr>
            <tr>
              <td>A3</td>
              <td>B6</td>
              <td>C10</td>
            </tr>

            </tbody>
          </table>
        </div>
    </div>

    <!--JavaScript-->
    <script src="script.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

CSS

.col-centered{
    margin: 0 auto;
    float: none;
    text-align: center;
    margin-top: 5%;

}

#selectContainer{
    width: 30%;
    margin: 0 auto;
    margin-top: 5%;

}

#table{
    margin-top: 5%;
}

根据另一个选择器自动完成选择器中的数据？

0 个答案: