这是我的 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")。
最佳答案
当您使用 $('.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>
关于javascript - 如何根据表中的另一个选择选项更改选项?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51728986/