使用html選項指定javascript變量

非常感謝所有人的幫助 - 非常感謝。使用html選項指定javascript變量

但是，接下來我想要做的事情非常複雜，我相信你們都有能力幫助我。

這是更復雜的代碼，我也想寫一個更好的方式 - 更少的代碼，更高效。

對不起，但這是很多代碼。

JS：

function keyTechAdoption() { 
     var keyTechBox = document.getElementById('keyTechTextBox'); 
     var sVOption = document.getElementById("dropdown_serverVirtualisation"); 
     var sV_Value = 10; 
     var dVOption = document.getElementById("dropdown_desktopVirtualisation"); 
     var dV_Value = 20; 

// Server Virtualisation Value ----------------------------------------------------------------------------------------- // 
     if (sVOption.options[sVOption.selectedIndex].value === "N") {sV1 = null; sV2 = 0;} 
     if (sVOption.options[sVOption.selectedIndex].value === "G") {sV1 = sV_Value * 1; sV2 = sV_Value * 1;} 
     if (sVOption.options[sVOption.selectedIndex].value === "O") {sV1 = sV_Value * 0.3; sV2 = sV_Value * 1;} 
     if (sVOption.options[sVOption.selectedIndex].value === "A") {sV1 = sV_Value * 0.5; sV2 = sV_Value * 1} 
     if (sVOption.options[sVOption.selectedIndex].value === "R") {sV1 = 0; sV2 = sV_Value * 1;} 
     else if (sVOption.options[sVOption.selectedIndex].value === "U") {sV1 = 0; sV2 = sV_Value * 1;} 
     // Server Virtualisation Value ----------------------------------------------------------------------------------------- // 

     // Desktop Virtualisation Value ----------------------------------------------------------------------------------------- // 
     if (dVOption.options[dVOption.selectedIndex].value === "N") {dV1 = null; dV2 = 0;} 
     if (dVOption.options[dVOption.selectedIndex].value === "G") {dV1 = dV_Value * 1; dV2 = dV_Value * 1} 
     if (dVOption.options[dVOption.selectedIndex].value === "O") {dV1 = dV_Value * 0.3; dV2 = dV_Value * 1;} 
     if (dVOption.options[dVOption.selectedIndex].value === "A") {dV1 = dV_Value * 0.5;dV2 = dV_Value * 1} 
     if (dVOption.options[dVOption.selectedIndex].value === "R") {dV1 = 0; dV2 = dV_Value * 1;} 
     else if (dVOption.options[dVOption.selectedIndex].value === "U") {dV1 = 0; dV2 = dV_Value * 1;} 
     // Desktop Virtualisation Value ---------------------------------------------------------------------------------- 
var keyTechTotal1 = sV1 + dV1; 
     var keyTechTotal2 = sV2 + dV2; 
     var keyTechPercentage = (keyTechTotal1)/(keyTechTotal2) * 100 
     if (keyTechTotal1 > 0) {keyTechBox.value = keyTechPercentage.toFixed(0) + "%";} 
     else {keyTechBox.value = 0 + "%";}

}

HTML：

<input class="textBox" runat="server" type="text" id="keyTechTextBox" readonly="true" /> 
<select class="selectElement" runat="server" id="dropdown_serverVirtualisation" onchange="keyTechAdoption()"> 
         <option value="N">N</option> 
         <option value="G">G</option> 
         <option value="O">O</option> 
         <option value="A">A</option> 
         <option value="R">R</option> 
         <option value="U">U</option> 
        </select> 
<select class="selectElement" runat="server" id="dropdown_desktopVirtualisation" onchange="keyTechAdoption()"> 
         <option value="N">N</option> 
         <option value="G">G</option> 
         <option value="O">O</option> 
         <option value="A">A</option> 
         <option value="R">R</option> 
         <option value="U">U</option> 
        </select>

我不知道怎麼感謝你讓人歎爲觀止足夠的幫助和時間:)

來源

2013-05-15 Singh

那麼首先，乘以1不d任何事情。來自哪些神奇數字？ – thatidiotguy

@thatidiotguy乘以1會將一個字符串轉換爲一個數字，但不適用，因爲'select1_control'是'10' – Ian

@thatidiotguy謝謝 - 這很有道理 - 爲什麼我甚至有它在那裏 – Singh

這就是爲什麼我喜歡的jQuery ... 30行的代碼= 6行.. :)

使用HTML5數據屬性和jquery..just需要在數據添加你的價值觀屬性..

HTML

<input type="text" id="resultBox" readonly="true" /> 
<select id="dropdown_test" > 
<option value="N" data-one="0" data-two="0">N</option> 
<option value="G" data-one="1" data-two="1">G</option> 
<option value="O" data-one="0.3" data-two="1">O</option> 
<option value="A" data-one="0.5" data-two="1">A</option> 
<option value="R" data-one="0" data-two="1">R</option> 
<option value="U" data-one="0" data-two="1">U</option> 
</select>

jQuery的

$(function(){ 
    $('#dropdown_test').change(function(){ 
    var select1_control = 10; 
    var str= select1_control * $(this).find('option:selected').data('one') + select1_control * $(this).find('option:selected').data('two'); 
    $('#resultBox').val(str); 
}); 
});

fiddle here

更新

就像我說的......只需要在這兩個選擇框添加數據屬性。。

HTML

<input class="textBox" runat="server" type="text" id="keyTechTextBox" readonly="true" /> 
<select class="selectElement" runat="server" id="dropdown_serverVirtualisation"> 
    <option value="N" data-one="0" data-two="0">N</option> 
    <option value="G" data-one="1" data-two="1">G</option> 
    <option value="O" data-one="0.3" data-two="1">O</option> 
    <option value="A" data-one="0.5" data-two="1">A</option> 
    <option value="R" data-one="0" data-two="1">R</option> 
    <option value="U" data-one="0" data-two="1">U</option> 
</select> 
<select class="selectElement" runat="server" id="dropdown_desktopVirtualisation"> 
    <option value="N" data-one="0" data-two="0">N</option> 
    <option value="G" data-one="1" data-two="1">G</option> 
    <option value="O" data-one="0.3" data-two="1">O</option> 
    <option value="A" data-one="0.5" data-two="1">A</option> 
    <option value="R" data-one="0" data-two="1">R</option> 
    <option value="U" data-one="0" data-two="1">U</option> 
</select>

jQuery的

$(function(){ 
$('.selectElement').change(function() { 
    var sV_Value = 10; 
    var dV_Value = 20; 

    var sV1 = sV_Value * $('#dropdown_serverVirtualisation').find('option:selected').data('one') 
    var sV2 = sV_Value * $('#dropdown_serverVirtualisation').find('option:selected').data('two'); 

    var dV1 = dV_Value * $('#dropdown_desktopVirtualisation').find('option:selected').data('one') 

    var dV2 = dV_Value * $('#dropdown_desktopVirtualisation').find('option:selected').data('two'); 

    var keyTechTotal1 = sV1 + dV1; 
    var keyTechTotal2 = sV2 + dV2; 

    var keyTechPercentage = (keyTechTotal1)/(keyTechTotal2) * 100 
    if (keyTechTotal1 > 0) { 
     var str = keyTechPercentage.toFixed(0) + "%"; 
    } else { 
     var str = 0 + "%"; 
    } 

    $('#keyTechTextBox').val(str); 
}); 

$('.selectElement').trigger('change'); //<---this if you need the % in page load to when N and N is selected 
});

並沒有改變大部分的calculatoin部分...

updated fiddle

來源

2013-05-15 19:11:12 bipen

哇jquery是驚人的 - 感謝那 – Singh

歡迎...快樂的編碼... – bipen

其實我需要更多的幫助，請你:) - 如果這沒關係？ – Singh

HTML：

<select id="dropdown_test" onchange="calc()"> 
    <option value="N" data-var1="null" data-var2="0">N</option> 
    <option value="G" data-var1="1" data-var2="1">G</option> 
    <option value="O" data-var1="0.3" data-var2="1">O</option> 
    <option value="A" data-var1="0.5" data-var2="1">A</option> 
    <option value="R" data-var1="0" data-var2="1">R</option> 
    <option value="U" data-var1="0" data-var2="1">U</option> 
</select>

的Javascript：

function calc() { 
    var resultBox = document.getElementById('resultBox'); 
    var select1 = document.getElementById("dropdown_test"); 
    var item = select1.options[select1.selectedIndex]; 
    var select1_control = 10; 

    var var1 = item.getAttribute('data-var1'); 
    var var2 = item.getAttribute('data-var2'); 

    resultBox.value = parseFloat(var1) + (parseFloat(var2) * select1_control); 
}

Demo

來源

2013-05-15 18:56:40

謝謝你 - 它作品不錯 – Singh

您可以使用自定義屬性和更通用的JavaScript來獲取所需的可擴展性。

HTML：

<input type="text" id="resultBox" readonly="true" /> 
<select id="dropdown_test" onchange="calc()"> 
    <option m1="" m2="0" value="N">N</option> 
    <option m1="1" m2="1" value="G">G</option> 
    <option m1="0.3" m2="1" value="O">O</option> 
    <option m1="0.5" m2="1" value="A">A</option> 
    <option m1="0" m2="1" value="R">R</option> 
    <option m1="0" m2="1" value="U">U</option> 
</select>

的javascript：

function calc() { 
    var resultBox = document.getElementById('resultBox'); 
    var select1 = document.getElementById("dropdown_test"); 
    var select1_control = 10; 
    var selected_option = select1.options[select1.selectedIndex]; 
    var m1 = selected_option.getAttribute("m1");   
    if (m1 == ""){ 
     var1 = null 
    } else { 
     var1 = select1_control * parseFloat(m1); 
    } 

    var m2 = selected_option.getAttribute("m2"); 
    if (m2 == ""){ 
     var2 = null 
    } else { 
     var2 = select1_control * parseFloat(m2); 
    } 

    resultBox.value = (var1 + var2); 
}

來源

2013-05-15 18:57:36 Li0liQ

感謝您的幫助 – Singh

如果你可以改變HTML，我只想補充一些數據屬性，使這個簡單得多。例如：

<input type="text" id="resultBox" readonly="true" /> 
<select id="dropdown_test" onchange="calc()"> 
    <option data-val1="0" data-val2="0" value="N">N</option> 
    <option data-val1="1" data-val2="1" value="G">G</option> 
    <option data-val1="0.3" data-val2="1" value="O">O</option> 
    <option data-val1="0.5" data-val2="1" value="A">A</option> 
    <option data-val1="0" data-val2="1" value="R">R</option> 
    <option data-val1="0" data-val2="1" value="U">U</option> 
</select>

然後，您可以簡單地使用所選擇的選項的值來計算您的總：

function calc() { 
    var select1_control = 10; 
    var val1 = parseFloat(jQuery('#dropdown_test').find(':selected').data('val1'), 10); 
    var val2 = parseFloat(jQuery('#dropdown_test').find(':selected').data('val2'), 10); 
    jQuery('#resultBox').val((val1 * select1_control) + (val2 * select1_control)); 
}

小提琴：http://jsfiddle.net/duffmaster33/z4Pfg/

來源

2013-05-15 18:59:07 Duffmaster33

非常感謝:) – Singh

不改變HTML，你可以重構你的JavaScript來：

function calc() { 

    var SELECT1_CONTROL = 10; 
    var matrix = { 
     "N": [null, 0], 
     "G": [1, 1], 
     "O": [0.3, 1], 
     "A": [0.5, 1], 
     "R": [0, 1], 
     "U": [0, 1] 
    } 

    var selectedValue = document.getElementById("dropdown_test").value; 
    var var1 = SELECT1_CONTROL * matrix[selectedValue][0]; 
    var var2 = SELECT1_CONTROL * matrix[selectedValue][1]; 

    var resultBox = document.getElementById('resultBox'); 
    resultBox.value = (var1 + var2); 
}

或考慮下去數據註解的路線的建議裏卡多

來源

2013-05-15 19:03:23 magritte

非常感謝 - 迄今爲止，這看起來像我一直在尋找的:) – Singh

使用html選項指定javascript變量

回答

相關問題