使用選擇選項使用JavaScript進行計算？

Question

有人請幫助我一些JavaScript編碼。我正在建設一個網站使用asp.net，其中有多個html選擇元素，他們選擇的選項決定了輸入框的值是什麼，看到這個鏈接： 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中每個選項，並從那裏開始計算。

可以genericly插入數據分鐘，你可以描述pertentages應如何計算最大的.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>