javascript - 使用带有选择选项的 javascript 进行计算？

Question

这个问题不太可能对任何 future 的访客有帮助；它只与一个较小的地理区域、一个特定的时间点或一个非常狭窄的情况相关，通常不适用于全世界的互联网受众。如需帮助使此问题更广泛适用， visit the help center 。

已关闭 10 年前。

请有人帮我编写一些 JavaScript 代码。我正在使用 asp.net 构建一个网站，其中有多个 html select 元素，它们的选定选项决定输入框的值，请参阅此链接: http://codepen.io/anon/pen/evAuc

我将有大约 67 个这样的下拉列表，这对于使用低效代码进行编码将是一场噩梦。

请帮我为这两个选择编写更有效的代码，然后我可以自己完成剩下的事情。

干杯。

Answer 1

我将您的代码分成几部分(我使用了jquery)，但您仍然应该更改函数名称和calculateValue实现以使您的代码更清晰。

$(document).ready(function(){
    initCalculation($('#keyTechTextBox'),$("#dropdown_serverVirtualisation"),$("#dropdown_desktopVirtualisation"));
    //more can be added here
});

function initCalculation(inputField,select1,select2){
    select1.change(function(){ //this can be done more generic
       inputField.val(calculateValue(select1.val(),select2.val()).toFixed(0)+"%");
    });
    select2.change(function(){
        inputField.val(calculateValue(select1.val(),select2.val()).toFixed(0)+"%");
    });
}

function calculateValue(firstOpt,secondOpt){ //more abstract function name please :D
    //you should really optimize this.. - i did some
    var sV_Value = 10;
    var sV1 =0;
    var sV2 = sV_Value;
    var dV1 =0;
    var dV2 = dV_Value;
    if (firstOpt === "G") {
        sV1 = sV_Value;
    }
    if (firstOpt === "O") {
        sV1 = sV_Value * 0.5;
    }
    if (firstOpt === "A") {
        sV1 = sV_Value * 0.3;
    }
    if (firstOpt === "R") {
        sV1 = 0;
    } else if (firstOpt === "U") {
        sV1 = 0;
    }
    if (secondOpt === "N") {
        dV2 = 0;
    }
    if (secondOpt === "G") {
        dV1 = dV_Value;
    }
    if (secondOpt === "O") {
        dV1 = dV_Value * 0.5;
    }
    if (secondOpt === "A") {
        dV1 = dV_Value * 0.3;
    }
    var keyTechTotal1 = sV1 + dV1;
    var keyTechTotal2 = sV2 + dV2;
    return (keyTechTotal1) / (keyTechTotal2) * 100;
}

下面我向您展示一个更通用的 JavaScript 解决方案

更改 html 中每个选项的 min 和 max 属性，然后从那里开始计算。

您通常可以在 .net 中插入数据 min 和 max 属性

<input class="textBox" runat="server" type="text" id="keyTechTextBox" readonly="true" />
<select runat="server" id="dropdown_serverVirtualisation" onchange="keyTechAdoption()">
    <option class="lightgrey" value="N" data-min="0" data-max="1">N</option>
    <option class="green" value="G"  data-min="0" data-max="1">G</option>
    <option class="orange" value="O" data-min="0" data-max="1">O</option>
    <option class="yellow" value="A" data-min="0" data-max="1">A</option>
    <option selected="selected" class="red" value="R" data-min="0" data-max="1">R</option>
    <option class="purple" value="U" data-min="0" data-max="1">U</option>
</select>
<select runat="server" id="dropdown_desktopVirtualisation" onchange="keyTechAdoption()">
    <option class="lightgrey" value="N" data-min="0" data-max="1">N</option>
    <option class="green" value="G" data-min="0" data-max="1">G</option>
    <option class="orange" value="O" data-min="0" data-max="1">O</option>
    <option class="yellow" value="A" data-min="0" data-max="1">A</option>
    <option selected="selected" class="red" value="R" data-min="0" data-max="1">R</option>
    <option class="purple" value="U" data-min="0" data-max="1">U</option>
</select>

<script type="text/javascript">
    function initCalculation(inputField,select1,select2){
        opt1 = select1.find('option:selected');
        opt2 = select2.find('option:selected');
        select1.change(function(){ //this can be done more generic
            inputField.val(calculateValue(opt1,opt2).toFixed(0)+"%");
        });
        select2.change(function(){
            inputField.val(calculateValue(opt1,opt2).toFixed(0)+"%");
        });
    }

    function calculateOptions(el1,el2){
        calculateValue(el1.data('min'),el1.data('max'),el1.data('min'),el1.data('max'));
    }

    function calculateValue(sV1,sV2,dV1,dV2){ //more abstract function name please :D
        var keyTechTotal1 = sV1 + dV1;
        var keyTechTotal2 = sV2 + dV2;
        return (keyTechTotal1) / (keyTechTotal2) * 100;
    }
</script>