刷新选择选项

Question

我总结了选择的一些值与此代码：

各个领域的

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

<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> So 2,1,0。

我该如何做到这一点？

Answer 1

这是因为你没有包括已经选择的值。

例如如果选择了2，并且您处于“8”。那么selectbox可以选择的最大值实际上是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/