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

这是我的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.
低
中间
高
1.
2.
3.
4.
5.
6.

如何根据逻辑（低=1-2，中=3-4，高=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;
    }
});

$（'.category'）。在（'change'，function（）上{
开关（$（this.val（））{
案例“低”：
$（'.details选项'）。每个（函数（）{
if（+$（this）.val（）<3）{
$（this.show（）；
$（this）.find（'option:first'）.prop（'selected'，true）；
}else$（this.hide（）；
});
打破
案例“中”：
$（'.details选项'）。每个（函数（）{
如果（+$（this.val（）<5&+$（this.val（）>2）{
$（this.show（）；
$（this）.find（'option:first'）.prop（'selected'，true）；
}else$（this.hide（）；
});
打破
案例“高”：
$（'.details选项'）。每个（函数（）{
如果（+$（this）.val（）>4）{
$（this.show（）；
$（this）.find（'option:first'）.prop（'selected'，true）；
}else$（this.hide（）；
});
打破
案例“”：
$（'.details选项'）.show（）；
$（'.details选项：first'）.prop（'selected'，true）；
打破
}
});

---

但每次我更改其他行类别时，它都会更改表上的每个选项（class=“details”）。

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

更改代码

$（'.details选项'）

到

$（this）.closest（'tr'）.find（'.details选项'）

当您使用

$（'.details选项'）

时，它将获取所有详细信息选项并为所有人循环。因此，不要使用

$（'.details选项'）

而是使用此

$（this.closest（'tr'）。查找（'.details选项'）

最近的

将只返回所选的
类别
详细信息选项，并仅循环该选项而不是所有选项

演示


$（'.category'）。在（'change'，function（）上{
开关（$（this.val（））{
案例“低”：
$（this）.closest（'tr'）.find（'.details选项'）.each（function（）{
if（+$（this）.val（）<3）{
$（this.show（）；
$（this）.find（'option:first'）.prop（'selected'，true）；
}else$（this.hide（）；
});
打破
案例“中”：
$（this）.closest（'tr'）.find（'.details选项'）.each（function（）{
如果（+$（this.val（）<5&+$（this.val（）>2）{
$（this.show（）；
$（this）.find（'option:first'）.prop（'selected'，true）；
}else$（this.hide（）；
});
打破
案例“高”：
$（this）.closest（'tr'）.find（'.details选项'）.each（function（）{
如果（+$（this）.val（）>4）{
$（this.show（）；
$（this）.find（'option:first'）.prop（'selected'，true）；
}else$（this.hide（）；
});
打破
案例“”：
$（this）.closest（'tr'）.find（'.details选项'）.show（）；
$（this）.closest（'tr'）.find（'.details选项：first'）.prop（'selected'，true）；
打破
}
});

低
中间
高
1.
2.
3.
4.
5.
6.
低
中间
高
1.
2.
3.
4.
5.
6.
我不确定我是否理解你的意思，但我认为这是。。。
$（'.category'）。在（'change'，function（）上{
var option=$（this.data（'option'）；
var值=$（this.val（）；
var details=$（'select.details[data option=“”+option+”）；
开关（值）{
案例“低”：
details.html(`
1.
2.
`);
打破
案例“中”：
details.html(`
3.
4.
`);
打破
案例“高”：
details.html(`
5.
6.
`);
打破
}
});

低
中间
高
1.
2.
低
中间
高
1.
2.

我建议使用
hide
类，您可以通过以下方式选择第一个选项：


$（'.category'）。在（'change'，function（）上{
var-detail=$（this.closest（'tr'）。find（'.details'）；
开关（$（this.val（））{
案例“低”：
detail.find（'option'）。每个（函数（）{
if（+$（this）.val（）<3）{
$（this.removeClass（'hide'）；
}否则{
$（this.addClass（'hide'）；
}
});
打破
案例“中”：
detail.find（'option'）。每个（函数（）{
如果（+$（this.val（）<5&+$（this.val（）>2）{
$（this.removeClass（'hide'）；
}否则{
$（this.addClass（'hide'）；
}
});
打破
案例“高”：
detail.find（'option'）。每个（函数（）{
如果（+$（this）.val（）>4）{
$（this.removeClass（'hide'）；
}否则{
$（this.addClass（'hide'）；
}
});
打破
案例“”：
detail.find（'option'）.show（）；
detail.find（'option:first'）.prop（'selected'，true）；
打破
}
detail.find（'option:not（.hide:first'）.prop（'selected'，true）；
});
.hide{
显示：无；
}

低
中间
高