1

誰か、javascript のコーディングを手伝ってください。複数のhtml select要素があり、それらの選択されたオプションが入力ボックスの値を決定するasp.netを使用してWebサイトを構築しています。このリンクを参照してください: http://codepen.io/anon/pen/evAuc

このような約 67 個のドロップダウンがあり、非効率的なコードでコーディングするのは悪夢です。

これら 2 つの選択のためのより効率的なコードを作成するのを手伝ってください。そうすれば、残りは自分で行うことができます。

乾杯。

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 の各オプションの最小属性と最大属性を変更し、そこから計算を開始します。

一般に、データの最小属性と最大属性を.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 に答える