使此代码在选择选项更改时更新

getting this code to update on select option change

本文关键字：更新 选项 选择 代码      更新时间：2023-09-26
<!--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语句中的方式。我想要这样做的原因是因为字段是动态添加的。所以如果你能在现有的代码中添加一个函数，让它在我改变选择选项时改变值，那就太好了。上面的代码是完美的，它只是需要我所要求的。

首先你的代码中有一些不一致的地方。

每次更改下拉菜单的选择时，您都在设置on input事件。在jquery中，这很糟糕，因为它不会覆盖之前的事件，而是向该元素添加另一个事件。想象一下改变下拉菜单100次。

首先，我所做的是在$(document).ready函数中为每个包含'sex'的元素添加输入事件

$(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。我们只关心最大值。所以我只是根据大小写找到所需的最大值，然后根据两者设置文本框的最小值和最大值。

现在这行代码 
$.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"));
});

我已经测试了代码在我的结束和它的工作良好。

相关文章：