1

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

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

请帮我为这两个选择写一个更有效的代码，然后我可以自己做剩下的。

干杯。

4

1 回答 1

2

我将您的代码分成几部分（我使用了 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 中插入数据最小和最大属性

<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>
于 2013-05-15T09:00:43.040 回答