Refresh Выберите вариант

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/