Question

我有一个计算表单，通过下拉选择和复选框计算产品的总成本。有2种不同类型的产品（下拉列表）和几个要添加的选项（复选框）。其中2个选项/复选框具有百分比值，这意味着如果在下拉列表中选择的产品的值为10并且选中了具有10％值的复选框，则总值/成本将变为11。

到目前为止，这是有效的，但现在包含百分比值的复选框仅指向1个下拉框，我希望他们同时查看两者。因此，如果选择了产品1（下拉列表1），则需要根据该价格添加百分比值，但如果选择了产品2（下拉列表2），则相同的复选框应根据产品2的价格计算其百分比值。 / p>

在我的代码中，这看起来如下：

<select class="selectpicker" id="NonTrans" name='NonTrans'
onchange="calculateTotal()">
<option value="1Non">Select Dimensions</option>
<option value="2Non">3,00 6,40 0,85 (3)</option>
<option value="3Non">3,00 7,50 0,85 (3)</option>

<select id="FullTrans" name='FullTrans' onchange="calculateTotal()">
<option value="1Full">Select Dimensions</option>
<option value="2Full">3,00 6,40 0,85 (3)</option>
<option value="3Full">3,00 7,50 0,85 (3)</option>

这是包含主要产品的第一个和第二个下拉框的HTML部分。

<input type="checkbox" id="optionprice" name='optionprice' onclick="calculateTotal()" />

这是包含百分比值的复选框的HTML部分。

 var NonTrans_prices = new Array();
 NonTrans_prices["1Non"] = 0;
 NonTrans_prices["2Non"] = 5994;
 NonTrans_prices["3Non"] = 7076;

function NonTrans() {
   var NonTransPrice = 0;

   var theForm = document.forms["GRANADANEO"];

   var selectedFilling = theForm.elements["NonTrans"];

   NonTransPrice = NonTrans_prices[selectedFilling.value];

   return NonTransPrice;
 }

 var FullTrans_prices = new Array();
 FullTrans_prices["1Full"] = 0;
 FullTrans_prices["2Full"] = 5994;
 FullTrans_prices["3Full"] = 7076;

function FullTrans() {
   var FullTransPrice = 0;

   var theForm = document.forms["GRANADANEO"];

   var selectedFilling = theForm.elements["FullTrans"];

   FullTransPrice = FullTrans_prices[selectedFilling.value];

   return FullTransPrice;
 }

这是第一个和第一个的JavaScript部分。第二个下拉框。

 function HoutImitatie() {
   var chkOptionPrice = document.getElementById("optionprice");
   var theForm = document.forms["GRANADANEO"];
   var selectedFilling = theForm.elements["NonTrans"];
   var lstNonTransValue = NonTrans_prices[selectedFilling.value];

   var inscriptionPrice = 0;

   if (optionprice.checked === true) {

     var price = NonTrans_prices[selectedFilling.value];

     var percentage = 20;
     inscriptionPrice = (price * percentage) / 100;
   }

   return inscriptionPrice;
 }

最后，这是包含百分比值的复选框的JavaScript部分。

function calculateTotal() {

   var cakePrice = NonTrans() + FullTrans() + SchuifdeurVoorzijde();


   var divobj = document.getElementById('totalPrice');
   divobj.style.display = 'block';
   divobj.innerHTML = "Total Price: " + cakePrice + " \u20ac";

 }

我已经尝试过几个东西，但是我不是JavaScript程序员，所以我尝试过的只是简单地在HoutImitatie的函数中添加FullTrans_prices的变量，我已经尝试了几种形式。他们中的大多数没有显示任何结果，我所拥有的最好的是NaN。

我想为你们添加JSFiddle的完整代码，但由于某种原因，我没有在那里看到我的总分，而我在实时版本上看到它：Calculator live

我可以提供与任何人一起玩的完整代码，但是在这个问题中放置超过2000行代码对我来说似乎并不明智。

我的完整代码可通过以下方式查看：JSFiddle

Answer 1

我继续尝试并尝试，最后我使用以下代码：

function HoutImitatie() {
   var chkOptionPrice = document.getElementById("optionprice");
   var theForm = document.forms["GRANADANEO"];
   var selectedFilling = theForm.elements["NonTrans"];
//I added the line below exactly in the same form as the line above:
   var selectedFilling2 = theForm.elements["FullTrans"]
   var lstNonTransValue = NonTrans_prices[selectedFilling.value];

   var inscriptionPrice = 0;

   if (optionprice.checked === true) {
//And I added that variable again below in the definition of price:
     var price = NonTrans_prices[selectedFilling.value] + FullTrans_prices[selectedFilling2.value];

     var percentage = 20;
     inscriptionPrice = (price * percentage) / 100;
   }

   return inscriptionPrice;
 }

我不知道这是否是最佳做法，因为这真的是一个幸运的镜头。如果有人对我的代码有更好的建议或评论，请说明我不想让其他人走错路，因为我找到的解决方案适合我的情况。

使复选框独立显示2个下拉框值

1 个答案: