讓它100％全部

Question

我有3個下拉框，其中有10到100的值。我希望用戶從所有下拉框中選擇累計值100。 這意味着，如果我從第一個下拉框，未來2下拉應留有選擇共有100

我迄今所做的選項中選擇20是在這裏：CHECK IT HERE (JS FIDDLE)

HTML

<select id="foreign" class="me"> 
    <option value="">Foreign Policy</option> 
    <option value="10">10%</option> 
    <option value="20">20%</option> 
    <option value="30">30%</option> 
    <option value="40">40%</option> 
    <option value="50">50%</option> 
    <option value="60">60%</option> 
    <option value="70">70%</option> 
    <option value="80">80%</option> 
    <option value="90">90%</option> 
    <option value="100">100%</option> 
</select> 
<select id="economy" class="me"> 
    <option value="">Economy Policy</option> 
    <option value="10">10%</option> 
    <option value="20">20%</option> 
    <option value="30">30%</option> 
    <option value="40">40%</option> 
    <option value="50">50%</option> 
    <option value="60">60%</option> 
    <option value="70">70%</option> 
    <option value="80">80%</option> 
    <option value="90">90%</option> 
    <option value="100">100%</option> 
</select> 
<select id="social" class="me"> 
    <option value="">Social Policy</option> 
    <option value="10">10%</option> 
    <option value="20">20%</option> 
    <option value="30">30%</option> 
    <option value="40">40%</option> 
    <option value="50">50%</option> 
    <option value="60">60%</option> 
    <option value="70">70%</option> 
    <option value="80">80%</option> 
    <option value="90">90%</option> 
    <option value="100">100%</option> 
</select> 
<br /> 

<span id="message"></span> 

的JavaScript

/*var total = new Array(); 
$('#foreign option').each(function() { 
    total.push($(this).val()); 
}); 

console.log(total);*/ 

var total = 100; 
var ids = ['foreign', 'social', 'economy']; 
var current_selected; 

$('.me').change(function() { 
    current_selected = $(this).attr('id'); 
    var socval = $('#' + current_selected + ' option:selected').val(); 
    total = total - socval; 

    if ($.inArray($(this).attr('id'), ids) > -1) { 
     ids.splice($.inArray($(this).attr('id'), ids), 1); 

    } 

    for (var i = 0; i < ids.length; i++) { 

     $('#' + ids[i] + ' option').each(function() { 

      if ($(this).val() >= total) { 

        $(this).attr('disabled', true); 

      } else { 
       $(this).attr('disabled', false); 
      } 

     }); 

    } 


    if (total <= 0) { 
     total = 100; 
    } 
    console.log(total); 

    ids.push(current_selected); 

}); 

這是非常多的工作，有一些小故障。

UPDATE 我想我解決了它。

SOLVED FIDDLE

感謝誰幫助。

問候

Answer 1

發生變化：

if ($(this).val() >= total) {

到

if ($(this).val() > total) {

解決只能夠選擇高達90％的問題

Working sample

更新

關於改變的值，我可能會採取前瞻性的方法和重置正向選擇的價值。例如：

var selectIds = ['first', 'second', 'third'] 

$('select').change(function(){ 
var currentIndex = $.inArray($(this).attr('id'), selectIds); 

for(var i = currentIndex + 1; i < selectIds.length; i++) 
{ 
    $('#' + selectIds[i]).val("0"); 
} 

}); 

這基本上重置了鏈中選擇項的值，這些值比當前使用的當前選擇框更進一步。

Working example

您也想這樣做的禁用在向前看。您只應當禁用當前選擇下方的選擇列表中的項目。第一個選擇列表應該始終能夠選擇任何值，並且基於此選擇以下選擇。這符合上述方法。

Answer 2

我做你的代碼的另一個版本，再加上修復bug

http://jsfiddle.net/rzBej/62/

$('.me').change(function() { 
    var totalSoFar = 0; 
    $('.me').each(function() { 
     totalSoFar += +$(this).val(); 
    }); 

    var tmp = 100 - totalSoFar; 
    $('.me').each(function() { 
     var $this = $(this); 
     $this.find('option').each(function() { 
      $this.prop('disabled', $this.attr('value') > tmp); 
     }); 
    }) 
});​