Question

根据使用3个选择器选择的值，我只需要显示包含同时在前面选择的那些值的行。

我目前有这个，它适用于一个选择器。如何将其扩展到所有3个选择器以影响显示的行？

    <select id="selA">
      <option value="0">Toate</option>
      <option value="a1">A1</option>
      <option value="a2">A2</option>
      <option value="a3">A3</option>
    </select> 
    <select id="selB">
      <option value="0">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> 
    <select id="selC">
      <option value="0">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 class="choice one">A1</td>
        <td class="choice one">B1</td>
        <td class="choice one">C1</td>
      </tr>
      <tr>
        <td class="choice one">A1</td>
        <td class="choice one">B1</td>
        <td class="choice one">C2</td>
      </tr>
      <tr>
        <td class="choice one">A1</td>
        <td class="choice one">B1</td>
        <td class="choice one">C3</td>
        </tr>
      <tr>
        <td class="choice one">A1</td>
        <td class="choice one">B2</td>
        <td class="choice one">C4</td>
      </tr>
    </tbody>
  </table>

和JS：

 $(document).ready(function(){
  $("#selA").change(function(){
    var textselected =  document.getElementById("selA").value ;
    target = '.' + textselected;
    $('.choice').hide();
    $(target).show();

  });
});

如何做到这一点，使其不依赖于类并隐藏选择器中没有所有值的行？

Answer 1

K，我想你想要这样的东西：

https://jsfiddle.net/agkh7f3w/2/

HTML：

<div id="filtru">filtru:
  <select id="selA">
    <option value="">Toate</option>
    <option value="a1">A1</option>
    <option value="a2">A2</option>
    <option value="a3">A3</option>
  </select>
  <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>
  <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>
  </tbody>
</table>

JS：

$(document).ready(function() {
  $('#filtru select').change(function() {
    const filtru = [$('#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(filtru[i]) === -1) {
          $(this).closest('tr').hide();
        }
      })
    })
  });
});

根据3个选择器更改表行

1 个答案: