获取此代码更新选择选项更改

Question

<!--js--> 

function changeValue(dropdown,source) { 
    var option = dropdown.options[dropdown.selectedIndex].value; 
    if (option == '1' && source==0) { 
     var total = 20; 
     $("span").text(total); 
     $('.balance').attr({"min":0, "max":total}).on('input', function() { 
      var value = parseInt(this.value); 
      var otherInputs = $('.balance').not(this); 
      var remainderDiv; 
      var remainder, sum; 
      if (isNaN(value)) { 
       value = 0; 
      } else if (value > total) { 
       value = total; 
      } else if (value < 0) { 
      value = 0; 
      } 
      this.value = value; 
      remainder = total - value; 
      remainderDiv = remainder/otherInputs.length; 
      sum = value; 
      $.each(otherInputs, function(input) { 
      sum += Number(otherInputs[input].value); 
      }); 
      if (sum > total) { 
      otherInputs.val(remainderDiv); 
      } 
     }); 
    }else if (option == '2' && source==0) { 
     var total = 20; 
     $("span").text(total); 
     $('.balance').attr({"min":0, "max":total}).on('input', function() { 
      var value = parseInt(this.value); 
      var otherInputs = $('.balance').not(this); 
      var remainderDiv; 
      var remainder, sum; 
      if (isNaN(value)) { 
       value = 0; 
      } else if (value > total) { 
       value = total; 
      } else if (value < 0) { 
      value = 0; 
      } 
      this.value = value; 
      remainder = total - value; 
      remainderDiv = remainder/otherInputs.length; 
      sum = value; 
      $.each(otherInputs, function(input) { 
       sum += Number(otherInputs[input].value); 
      }); 
      if (sum > total) { 
       otherInputs.val(remainderDiv); 
      } 
     }); 
    } 
} 

<!--html--> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<select onchange="changeValue(this,0)"> 
    <option value="1">1-person</option> 
    <option value="2">2-10 group</option> 
</select> 


<input type="number" class="balance"> 
<input type="number" class="balance"> 

<!--html--> 

这就是我希望它留在选项和if语句的方式。我想这样的原因是因为这些字段是动态添加的。所以，如果你可以添加一个函数到现有的代码，让它改变值，当我改变选择选项，这将是伟大的。该代码的最上面是工作完美，它只是需要什么我问。

Answer 1

首先，您的代码中存在一些不一致之处。

每当您更改下拉列表的选择时，您都在设置输入事件。在jQuery中，这是不好的，因为它不覆盖前一个事件，但它增加了一个事件到该元素。想象一下改变下拉菜单100次。

所以首先我所做的是含有“性”作为类中的每个元素在$(document).ready功能

$(document).ready(function(){ 
    $('.sex').on('input', function() { 
     var option = $("#dropdown")[0].selectedIndex; 
     //your other code for balancing the inputs 
    }); 
}); 

现在添加输入事件是什么，我会在你写的changeValue()功能做的是刚刚设置输入元素的最小值和最大值，并且平衡它们的分割，以便两者的总和（可能在将来超过两个）不会超过当前情况的总和。

function changeValue(dropdown,source) { 
    if (source == 0){ 

     var caseNo = dropdown.selectedIndex; 
     var minValue = 0, maxValue = 1; 

     if(caseNo === 2) 
      maxValue = 15; 
     else if(caseNo === 3) 
      maxValue = 25; 

     $(".sex").attr({"min": minValue, "max": maxValue}); 

     $.each($(".sex"), function(){ 
      //your other code for balancing the inputs 
     }); 
    } 
} 

我们知道，最小值将始终为0，因为任何男性和女性的输入可以在任何情况下为0。我们只关心最大值。所以我只需根据case no找到所需的最大值，然后根据两者设置文本框的最小值和最大值。

现在这行代码

$.each($(".sex"), function(){ 
    //your other code for balancing the inputs 
}); 

应当用来平衡每当下拉的选择被改变的输入。

由于相同的代码将使用一遍又一遍，所以我做了一个名为balanceValues()

这里的功能是它的定义

function balanceValues(caseNo, elementId){ 
    var value = parseInt($("#" + elementId).val()); 
    var otherInputs = $(".sex").not($("#" + elementId)); 
    var remainderDiv; 
    var remainder, sum; 

    var total = 1; 

    if(caseNo === 2) 
     total = 15; 
    else if(caseNo === 3) 
     total = 25; 

    if (isNaN(value)) { 
     value = 0; 
    } else if (value > total) { 
     value = total; 
    } else if (value < 0) { 
     value = 0; 
    } 

    $("#" + elementId).val(value); 

    remainder = total - value; 
    remainderDiv = remainder/otherInputs.length; 
    sum = value; 
    $.each(otherInputs, function() { 
     sum += Number($(this).val()); 
    }); 

    if (sum > total) { 
     otherInputs.val(remainderDiv); 
    } 
    } 

几乎所有的代码都是一样的是你的，但我做了它可以重复使用。你只需要传递caseNo和输入改变的元素id。对于选择更改事件，我们将为所有输入调用此函数。

所以现在$(document).ready功能会是这样

$(document).ready(function(){ 
    $('.sex').on('input', function() { 
     var option = $("#dropdown")[0].selectedIndex; 
     balanceValues(option, this.id); 
    }); 
}); 

而且在changeValue()函数的代码行将在我把评论较早的将是这样。

$.each($(".sex"), function(){ 
    balanceValues(dropdown.selectedIndex, $(this).attr("id")); 
}); 

我测试了代码在我的结尾，它的工作正常。希望这能解决你的问题。