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 =＆gt;所以6,5,4,3,2,1,0应该是可能的。但是我的代码只允许10-3-1-4 = 2 0>所以2,1,0。

我怎样才能做到这一点？

Answer 1

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

e.g。如果选择2，那么你在＆＃34; 8＆＃34;。那么选择框可以选择的最大值实际上是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/

刷新选择选项

1 个答案: