下拉列表选择

Question

我正在尝试为表创建一个下拉选择器。它不是选择，我仍然是javascript的新手。

以下是我正在处理的代码段。

$('#vehicleSelect').change( function(){
  var selection = $(this).val();
  var dataset = $('#vehicleTable tbody').find('tr');
  
  dataset.each(function(index) {
    item = $(this);
    item.hide();
    
    var firstTd = item.find('td:first-child');
    var text = firstTd.text();
    if text == selection {
        item.show();
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select id='vehicleSelect'>
   <option value="">Please Select</option>
   <option value='SPARC'>SPARC</option>
   <option value='CIO_SP3_SB'>CIO_SP3_SB</option>
   <option value='CIO_SP3'>CIO_SP3</option>
   <option value='T4NG'>T4NG</option>
</select>

<table id='vehicleTable'>
   <thead>
      <tr>
         <th>Contract Type</th>
         <th>Contract Number</th>
         <th>Contract Holder</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>SPARC</td>
          <td>Conract1</td>
          <td>Company1</td>
      </tr>
      <tr>
         <td>CIO_SP3_SB</td>
         <td>Conract2</td>
         <td>Company2</td>
      </tr>
      <tr>
         <td>T4NG</td>
         <td>Conract3</td>
         <td>Company3</td>
      </tr>
      <tr>
          <td>CIO_SP3</td>
          <td>Conract4</td>
          <td>Company4</td>
      </tr>
   </tbody>
 </table>

Answer 1

除了if条件中没有()之外，代码似乎没有任何问题。

if (text == selection) 
{
    item.show();
}

Answer 2

正如@ Varun的回答所说，主要问题来自括号()，但您也可以缩短此操作，因此您不需要像下面的示例一样使用contains()选择器进行循环：

$('#vehicleSelect').change(function() {
  $('#vehicleTable tbody tr')
    .hide()
    .find('td:first-child:contains("' + $(this).val() + '")')
    .parent()
    .show();
});

$('#vehicleSelect').change(function() {
  $('#vehicleTable tbody tr')
    .hide()
    .find('td:first-child:contains("' + $(this).val() + '")')
    .parent()
    .show();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id='vehicleSelect'>
   <option value="">Please Select</option>
   <option value='SPARC'>SPARC</option>
   <option value='CIO_SP3_SB'>CIO_SP3_SB</option>
   <option value='CIO_SP3'>CIO_SP3</option>
   <option value='T4NG'>T4NG</option>
</select>

<table id='vehicleTable'>
  <thead>
    <tr>
      <th>Contract Type</th>
      <th>Contract Number</th>
      <th>Contract Holder</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>SPARC</td>
      <td>Conract1</td>
      <td>Company1</td>
    </tr>
    <tr>
      <td>CIO_SP3_SB</td>
      <td>Conract2</td>
      <td>Company2</td>
    </tr>
    <tr>
      <td>T4NG</td>
      <td>Conract3</td>
      <td>Company3</td>
    </tr>
    <tr>
      <td>CIO_SP3</td>
      <td>Conract4</td>
      <td>Company4</td>
    </tr>
  </tbody>
</table>

或者也使用filter()：

$('#vehicleSelect').change(function() {
  var selected = $(this).val();

  $('#vehicleTable tbody tr')
    .hide()
    .find('td:first-child')
    .filter(function(index) { return $(this).text() === selected; })
    .parent()
    .show();
});

$('#vehicleSelect').change(function() {
  var selected = $(this).val();

  $('#vehicleTable tbody tr')
    .hide()
    .find('td:first-child')
    .filter(function(index) { return $(this).text() === selected; })
    .parent()
    .show();
}).change();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id='vehicleSelect'>
   <option value="" selected>Please Select</option>
   <option value='SPARC'>SPARC</option>
   <option value='CIO_SP3_SB'>CIO_SP3_SB</option>
   <option value='CIO_SP3'>CIO_SP3</option>
   <option value='T4NG'>T4NG</option>
</select>

<table id='vehicleTable'>
  <thead>
    <tr>
      <th>Contract Type</th>
      <th>Contract Number</th>
      <th>Contract Holder</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>SPARC</td>
      <td>Conract1</td>
      <td>Company1</td>
    </tr>
    <tr>
      <td>CIO_SP3_SB</td>
      <td>Conract2</td>
      <td>Company2</td>
    </tr>
    <tr>
      <td>T4NG</td>
      <td>Conract3</td>
      <td>Company3</td>
    </tr>
    <tr>
      <td>CIO_SP3</td>
      <td>Conract4</td>
      <td>Company4</td>
    </tr>
  </tbody>
</table>

希望这有帮助。