刷新選擇選項

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/