刷新选择选项

Question

我用这段代码总结了一些选择器的值：

$('.menge_calc').change(function(){
    var sum = 0;
    $('select :selected').each(function() {
        sum += Number($(this).val());
    });
     $("#sum").html(sum);
	 
	 rest = 10-sum;
	 
	$("select option").each(function(){
					if($(this).val()>rest){ 
						$(this).hide(); 
					}
					
					if($(this).val()<=rest){ 
						$(this).show(); 
					}			
				
				});	
				
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="menge_calc" name="menge_1" id="menge_1">
<option class="option_calc option_0" value="0">0</option>
<option class="option_calc option_1" value="1">1</option>
<option class="option_calc option_2" value="2">2</option>
<option class="option_calc option_3" value="3">3</option>
<option class="option_calc option_4" value="4">4</option>
<option class="option_calc option_5" value="5">5</option>
<option class="option_calc option_6" value="6">6</option>
<option class="option_calc option_7" value="7">7</option>
<option class="option_calc option_8" value="8">8</option>
<option class="option_calc option_9" value="9">9</option>
<option class="option_calc option_10" value="10">10</option>
</select>

<select class="menge_calc" name="menge_2" id="menge_2">
<option class="option_calc option_0" value="0">0</option>
<option class="option_calc option_1" value="1">1</option>
<option class="option_calc option_2" value="2">2</option>
<option class="option_calc option_3" value="3">3</option>
<option class="option_calc option_4" value="4">4</option>
<option class="option_calc option_5" value="5">5</option>
<option class="option_calc option_6" value="6">6</option>
<option class="option_calc option_7" value="7">7</option>
<option class="option_calc option_8" value="8">8</option>
<option class="option_calc option_9" value="9">9</option>
<option class="option_calc option_10" value="10">10</option>
</select>

<select class="menge_calc" name="menge_3" id="menge_3">
<option class="option_calc option_0" value="0">0</option>
<option class="option_calc option_1" value="1">1</option>
<option class="option_calc option_2" value="2">2</option>
<option class="option_calc option_3" value="3">3</option>
<option class="option_calc option_4" value="4">4</option>
<option class="option_calc option_5" value="5">5</option>
<option class="option_calc option_6" value="6">6</option>
<option class="option_calc option_7" value="7">7</option>
<option class="option_calc option_8" value="8">8</option>
<option class="option_calc option_9" value="9">9</option>
<option class="option_calc option_10" value="10">10</option>
</select>

<div id="sum">SUM OF SELECTED OPTIONS</div>

所有字段的总和最多应为 10，并且只能允许人们选择可能的选项。它工作得很好，但编辑不能正常工作。

假设首先选择了选项 3、1 和 4。现在用户想要更改并单击最后一个选择（选择了 4）。他现在应该能够在 10-3-1=6 => 之间进行选择，所以 6,5,4,3,2,1,0 应该是可能的。但我的代码只允许 10-3-1-4=2 0> 所以 2,1,0。

我怎样才能做到这一点？

Answer 1

这是因为您没有包含已选择的值。

例如如果选择了 2，并且您位于“8”。那么该选择框可以选择的最大值实际上是 4（因为已经包含了现有的 2）。

这是使它工作的javascript：

$('.menge_calc').change(function(){
var sum = 0;
$('select :selected').each(function() {
    sum += Number($(this).val());
});
$("#sum").html(sum);

rest = 10-sum;

$("select").each(function()
{
var currentValue = Number($(this).val());
var maxValue = currentValue + rest;
$(this).children("option").each(function(){
    if($(this).val()>maxValue){ 
        $(this).hide(); 
    }

    if($(this).val()<=maxValue){ 
        $(this).show(); 
    }           

    }); 
 });

});

这是一个可以正常工作的 JSFiddle：https://jsfiddle.net/mu8cnu6j/