如何基于表中的另一个选择选项更改选项？

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>

如何根据逻辑（低= 1-2，中= 3-4，高= 5-6）在第一行显示选项（class =“ details”）并选择第一个选项（class =“ details” ）而不更改其他行上的options（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;
  }
});

Answer 2

您可以做的是使用jQuery closest函数仅选择同一行中的选项

更改代码 $('.details option')至$(this).closest('tr').find('.details option')

Answer 3

我不确定我理解你的意思，但是我认为这是...

$('.category').on('change',function(){
    var option  = $(this).data('option');
    var value   = $(this).val();
    var details = $('select.details[data-option="'+option+'"]');

		switch( value ) {
    	case 'low':
        details.html(`
          <option value="1">1</option>
          <option value="2">2</option>
        `);
       break;
       
       case 'mid':
       	details.html(`
          <option value="3">3</option>
          <option value="4">4</option>
        `);
       break;
       
       case 'high':
       	details.html(`
          <option value="5">5</option>
          <option value="6">6</option>
        `);
       break;
    }
});

<table>
 <tbody>
  <tr>
   <td>
    <select class="category" data-option="1">
     <option value="low">Low</option>
     <option value="mid">Mid</option>
     <option value="high">High</option>
    </select>
   </td>
   <td>
    <select class="details" data-option="1">
     <option value="1">1</option>
     <option value="2">2</option>
    </select>
   </td>
  </tr>
  <tr>
   <td>
    <select class="category" data-option="2">
      <option value="low">Low</option>
      <option value="mid">Mid</option>
      <option value="high">High</option>
     </select>
   </td>
   <td>
    <select class="details" data-option="2">
     <option value="1">1</option>
     <option value="2">2</option>
    </select>
   </td>
  </tr>
 </tbody>
</table>

Answer 4

Working fiddle

我建议改用hide类，这使您能够选择第一个选项，就像这样：

$('.category').on('change', function() {
  var detail = $(this).closest('tr').find('.details');

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

  detail.find('option:not(.hide):first').prop('selected', true);
});

.hide {
  display: none;
}

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