javascript - 使用 html 选择选项分配 javascript 变量

Question

非常感谢大家的帮助 - 非常感谢。

但是，我接下来要做的事情真的很复杂，我相信你们有头脑可以帮助我。

这是更复杂的代码，我也想以更好的方式编写 - 代码更少，效率更高。

抱歉，代码太多了。

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>

我非常感谢你们这些了不起的人，感谢你们的帮助和时间 :)

Answer 1

这就是我喜欢 jquery 的原因...30 行代码 = 6 行...:)

使用 HTML5 数据属性和 jquery..只需在数据属性中添加您的值..

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>

j查询

$(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
});

没有改变你的大部分计算部分......

updated fiddle