javascript - 如何根据表中的另一个选择选项更改选项？

Question

这是我的 HTML。我尽量保持简单。

<table>
 <tbody>
  <tr>
   <td>
    <select class="category">
     <option value="low">Low</option>
     <option value="mid">Mid</option>
     <option value="high">High</option>
    </select>
   </td>
   <td>
    <select class="details">
     <option value="1">1</option>
     <option value="2">2</option>
     <option value="3">3</option>
     <option value="4">4</option>
     <option value="5">5</option>
     <option value="6">6</option>
    </select>
   </td>
  </tr>
  <tr>
   <td>
    <select class="category">
      <option value="low">Low</option>
      <option value="mid">Mid</option>
      <option value="high">High</option>
     </select>
   </td>
   <td>
    <select class="details">
     <option value="1">1</option>
     <option value="2">2</option>
     <option value="3">3</option>
     <option value="4">4</option>
     <option value="5">5</option>
     <option value="6">6</option>
    </select>
   </td>
  </tr>
 </tbody>
</table>

如何根据逻辑(low=1-2，mid=3-4，high=5-6)在第一行显示选项(class="details")并选择第一个选项(class="details") 不改变其他行的选项(class="details")？

我试过了

$('.category').on('change',function(){
    switch ($(this).val()){
        case 'low':
            $('.details option').each(function(){
                if (+$(this).val() < 3 ) {
                    $(this).show();
                    $(this).find('option:first').prop('selected', true);
                } else $(this).hide();
            });
        break;
        case 'mid':
            $('.details option').each(function(){
                if (+$(this).val() < 5 && +$(this).val() > 2) {
                    $(this).show();  
                    $(this).find('option:first').prop('selected', true);
                } else $(this).hide();
            });
        break;
        case 'high':
            $('.details option').each(function(){
                if (+$(this).val() > 4 ) {
                    $(this).show();  
                    $(this).find('option:first').prop('selected', true);
                } else $(this).hide();
            });
        break;
        case '':
            $('.details option').show();
            $('.details option:first').prop('selected', true);
        break;
    }
});

但每次我更改其他行类别时，它都会更改表格中的每个选项 (class="details")。

Answer 1

当您使用 $('.details option') 时，它将获取所有详细信息选项并循环所有选项。所以不要使用 $('.details option') 使用这个 $(this).closest('tr').find('.details option')

closest 将只返回选定的 category 详细信息选项，并且只为那个而不是所有的循环。

演示

$('.category').on('change', function() {
  switch ($(this).val()) {
    case 'low':
      $(this).closest('tr').find('.details option').each(function() {
        if (+$(this).val() < 3) {
          $(this).show();
          $(this).find('option:first').prop('selected', true);
        } else $(this).hide();
      });
      break;
    case 'mid':
      $(this).closest('tr').find('.details option').each(function() {
        if (+$(this).val() < 5 && +$(this).val() > 2) {
          $(this).show();
          $(this).find('option:first').prop('selected', true);
        } else $(this).hide();
      });
      break;
    case 'high':
      $(this).closest('tr').find('.details option').each(function() {
        if (+$(this).val() > 4) {
          $(this).show();
          $(this).find('option:first').prop('selected', true);
        } else $(this).hide();
      });
      break;
    case '':
      $(this).closest('tr').find('.details option').show();
      $(this).closest('tr').find('.details option:first').prop('selected', true);
      break;
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td>
        <select class="category">
          <option value="low">Low</option>
          <option value="mid">Mid</option>
          <option value="high">High</option>
        </select>
      </td>
      <td>
        <select class="details">
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
          <option value="5">5</option>
          <option value="6">6</option>
        </select>
      </td>
    </tr>
    <tr>
      <td>
        <select class="category">
          <option value="low">Low</option>
          <option value="mid">Mid</option>
          <option value="high">High</option>
        </select>
      </td>
      <td>
        <select class="details">
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
          <option value="5">5</option>
          <option value="6">6</option>
        </select>
      </td>
    </tr>
  </tbody>
</table>