我用这段代码总结了选择器的一些值:
$('.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。
我怎样才能实现这个目标?
最佳答案
这是因为您没有包含已选择的值。
例如如果选择 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/
关于javascript - 刷新选择选项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35686421/