如何根据表中的其他选择选项更改选项？

Question

Here is my HTML. I try to keep it as simple as possible.

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

How to show options(class="details") on the first row based on logic (low=1-2, mid=3-4, high=5-6) and select first option(class="details") without changing options(class="details") on the others row?

I have tried this

$('.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;
    }
});

But every time I change others row category, it changes every option (class=" details") on the table.

Answer 1

As you are using $('.details option') so it will get all details options and loop for all. So instead of using $('.details option') use this $(this).closest('tr').find('.details option')

The closest will only return selected category details options and loop only for that not for all.

DEMO

 $('.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> 

Answer 2

What you can do is select only the options in the same row by using the jQuery closest function

Change the code $('.details option') to $(this).closest('tr').find('.details option')

Answer 3

I'm not sure I understand what you mean, but I think this is...

 $('.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

I suggest the use of hide class instead, what gives you the ability to select the first option simply like :

 $('.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>