使用4个选择选项计算价格

Question

我不知道如何计算4个选择选项的价格，

正如您在HTML代码中所看到的，排名中有5个分区，总共有5个排名。

关于铜牌5到铜牌1的输入指南将=（$ 0 + $ 2 + $ 4 + $ 4 + $ 8）

青铜赛区5 = $ 0

青铜赛区4 = $ 2

青铜赛区3 = $ 4

青铜赛区2 = $ 6

青铜赛区1 = $ 8

白银价格也不一样，钻石也是如此。

另一个例子是：https://i.gyazo.com/177ce3443967600e12a4d42636a5db69.png

这显示了一个青铜分区5的订单，银色分区3.它遍历所选等级上每个分区的所有存储价格并添加它们直到它到达最后一个输入。

我希望这些信息可以帮助您理解我的意思。

＆＃13;

＆＃13;

<form id="divboost" name="priceCalc" action="">
  <br/>
  <select id="CRANK1"> Current Rank
        <option value="0">Bronze</option>
        <option value="1">Silver</option>
        <option value="2">Gold</option>
        <option value="3">Platinum</option>
        <option value="4">Diamond</option>
    </select>
  <br>
  <br/>
  <select id="CRANK2"> Current Divison
        <option value="5">Division 5</option>
        <option value="6">Division 4</option>
        <option value="7">Division 3</option>
        <option value="8">Division 2</option>
        <option value="9">Division 1</option>
    </select>
  <br>
  <br>
  <br/>
  <br/>
  <select id="DRANK1"> Desired Rank
        <option value="0">Bronze</option>
        <option value="1">Silver</option>
        <option value="2">Gold</option>
        <option value="3">Platinum</option>
        <option value="4">Ddiamond</option>
    </select>
  <br>
  <br/>
  <select id="DRANK2"> Desired Divison
        <option value="5">Division 5</option>
        <option value="6">Division 4</option>
        <option value="7">Division 3</option>
        <option value="8">Division 2</option>
        <option value="9">Division 1</option>
    </select>
  <br>
  <br>
  <input type="text" id="prices">
  <br/>
  <br>
</form>

＆＃13;

{{1}}

＆＃13;

＆＃13;

＆＃13;

Answer 1

正如您在此处所见：Entire form onChange，使用纯JS，您无法一次向整个表单添加change侦听器。您需要为其中要更改的每个元素添加一个侦听器。下面的代码显示了如何。

另外，我不知道每个“颜色”（青铜色，银色等等）的值，所以我发明了这些值，每个值增加2 ...使用的数学是： “Color”值是乘数，“Division”值是实际值。所以，

  

铜牌（乘数2）*分区4（值2）等于= $ 6

您应根据自己的需要调整值和数字，但我认为这里的逻辑会对您有所帮助。
可能您需要的不仅仅是设置value选项，它会更好将值存储在一个对象或数组中，然后从那里获取值，这将有助于更复杂的数学需求。

请参阅下面的代码，单击以显示代码段，并告诉我这是否对您有所帮助。

var current_division,
    desired_division;
    
    
function current1() {
  var Amt = document.priceCalc.CRANK1;
  var Qty = document.priceCalc.CRANK2;
  return parseInt(Qty.value) * parseFloat(Amt.value);
}

function desiredd() {
  var Amt = document.priceCalc.DRANK1;
  var Qty = document.priceCalc.DRANK2;
  return price = parseInt(Qty.value) * parseFloat(Amt.value);

}

function total() {
  if (isNaN(current1())) {
    current_division = 0;
  } else {
    current_division = current1();
  }

  if (isNaN(desiredd())) {
    desired_division = 0;
  } else {
    desired_division = desiredd();
  }

  var totalPrice = (current_division + desired_division);

  document.getElementById('prices').value = totalPrice;
  document.getElementById("prices").readOnly = true;
}

var changers = document.getElementsByClassName('changer');
for (var i =0; i < changers.length; i++){
  var changer = changers[i];
  changer.addEventListener('change', function() {
    total();
  })
}

<form id="divboost" name="priceCalc" action="">
  <br/>
  <select id="CRANK1" class='changer'> Current Rank
        <option value="2">Bronze</option>
        <option value="4">Silver</option>
        <option value="6">Gold</option>
        <option value="8">Platinum</option>
        <option value="10">Diamond</option>
    </select>
  <br>
  <br/>
  <select id="CRANK2" class='changer'> Current Divison
        <option value="0">Division 5</option>
        <option value="1">Division 4</option>
        <option value="2">Division 3</option>
        <option value="3">Division 2</option>
        <option value="4">Division 1</option>
    </select>
  <br>
  <br>
  <br/>
  <br/>
  <select id="DRANK1" class='changer'> Desired Rank
        <option value="2">Bronze</option>
        <option value="4">Silver</option>
        <option value="6">Gold</option>
        <option value="8">Platinum</option>
        <option value="10">Diamond</option>
    </select>
  <br>
  <br/>
  <select id="DRANK2" class='changer'> Desired Divison
        <option value="0">Division 5</option>
        <option value="1">Division 4</option>
        <option value="2">Division 3</option>
        <option value="3">Division 2</option>
        <option value="4">Division 1</option>
    </select>
  <br>
  <br>
  $ <input type="text" id="prices">
  <br/>
  <br>
</form>

Answer 2

我知道您需要遵循固定价格（这不是一个简单的数学公式）。

出于这个原因，我建议您在代码上使用数组来保存所有价格的值。您需要更新javascript数组以表示正确的值。

划分等级/部门的价格毫无意义。您可以合并二合一而不是两个单独的列表：B5, B4, B3, B2, B1, S5, S4, ...（其中B=Bronze和S=Silver）。

所以你有一个单一的价格清单。你需要做的是得到数组中的索引是当前的等级+除法，以及数组中的索引是所需的等级+除法。

当你有这两个值时，你只需要将当前索引中的所有值加到所需的索引中，从而获得累积值。

另外，如果他们选择的排名/分区比目前更低，或者价格会是负数（会产生惊人的经济影响），我建议警告用户。

我添加了前三个等级，你可以做其余的2.从UX的角度来看，我老实说建议使用一个select，因为没有太多的值，这意味着点击次数减少了为用户。如果你想走那条路，请告诉我，我会更新剧本。

如果用户选择了无效的等级/分区（更简单）

，则显示警告

＆＃13;

＆＃13;

var current_division,
    desired_division;

// These are the flattened prices for all divisions.
// First is bronze div5, second is bronze div4, bronze div3,
// bronze div2, bronze div1, silver div 5, etc.
// You would need to add the remaining ranks and update the prices.
var prices = [
00,02,04,06,08,
10,12,14,16,18,
20,22,24,26,28
];
    
    
function getCurrentIndex() {
  return (+document.getElementById("CRANK1").value + 
    +document.getElementById("CRANK2").value);
}

function getDesiredIndex() {
  return (+document.getElementById("DRANK1").value + 
    +document.getElementById("DRANK2").value);
}

function total() {
  var currentIndex = getCurrentIndex();
  var desiredIndex = getDesiredIndex();
  
  // If desiredIndex is greater than currentIndex, warn the user
  // that they can't go from high to low!
  if (desiredIndex < currentIndex) {
    document.getElementById('prices').value = "You can't rank backwards";
    return;
  }
  
  // Now you need to start summing the prices from currentIndex
  // to desiredIndex.
  
  var accumulatedPrice = 0;
  for(var i = currentIndex; i <= desiredIndex; i++) {
    accumulatedPrice += prices[i];
  }
  
  document.getElementById('prices').value = accumulatedPrice;
  document.getElementById("prices").readOnly = true;


}

document.getElementById('divboost').addEventListener('change', function() {
  total();
})

＆＃13;

<form id="divboost" name="priceCalc" action="">
  <br/>
  <select id="CRANK1"> Current Rank
        <option value="0">Bronze</option>
        <option value="5">Silver</option>
        <option value="10">Gold</option>
    </select>
  <br>
  <br/>
  <select id="CRANK2"> Current Divison
        <option value="0">Division 5</option>
        <option value="1">Division 4</option>
        <option value="2">Division 3</option>
        <option value="3">Division 2</option>
        <option value="4">Division 1</option>
    </select>
  <br>
  <br>
  <br/>
  <br/>
  <select id="DRANK1"> Desired Rank
        <option value="0">Bronze</option>
        <option value="5">Silver</option>
        <option value="10">Gold</option>
    </select>
  <br>
  <br/>
  <select id="DRANK2"> Desired Divison
        <option value="0">Division 5</option>
        <option value="1">Division 4</option>
        <option value="2">Division 3</option>
        <option value="3">Division 2</option>
        <option value="4">Division 1</option>
    </select>
  <br>
  <br>
  <input type="text" id="prices">
  <br/>
  <br>
</form>

＆＃13;

＆＃13;

＆＃13;

隐藏无效选项（更复杂）

＆＃13;

＆＃13;

var current_division,
    desired_division;

// These are the flattened prices for all divisions.
// First is bronze div5, second is bronze div4, bronze div3,
// bronze div2, bronze div1, silver div 5, etc.
// You would need to add the remaining ranks and update the prices.
var prices = [
00,02,04,06,08,
10,12,14,16,18,
20,22,24,26,28
];
    
    
function getIndex(rankNode, divisionNode) {
  return +rankNode.value + +divisionNode.value;
}

// show: can be a boolean or a function filter
function showHTMLCollection(htmlCollection, show) {
  if (!htmlCollection || htmlCollection.length === 0) return;
  show = typeof show === "undefined" ? true : show;
  for (var i = 0; i < htmlCollection.length; i++) {
      var computedShow = typeof show === "function" ? show(htmlCollection[i]) : show;
      htmlCollection[i].disabled = !computedShow;
      htmlCollection[i].style.display = computedShow ? "" : "none";
  }
}

function validateSelectValue(selectNode) {
  // If <select> has selected a disabled <option>, set to first valid value
  var selectedOptionNode = selectNode.querySelector("option[value='" + selectNode.value + "']");
  if (selectNode.value == "" || selectedOptionNode.disabled) {
    for (var i = 0; i < selectNode.children.length; i++) {
      if (!selectNode.children[i].disabled) {
        selectNode.value = selectNode.children[i].value;
        return;
      }
    }
    // There's no more valid values on the list, set to empty
    selectNode.value = "";
  }
}

function total() {
  var currentRankNode = document.getElementById("CRANK1");
  var currentDivisionNode = document.getElementById("CRANK2");
  var currentIndex = getIndex(currentRankNode, currentDivisionNode);
  
  var desiredRankNode = document.getElementById("DRANK1");
  var desiredDivisionNode = document.getElementById("DRANK2");
  var desiredIndex = getIndex(desiredRankNode, desiredDivisionNode);
  
  var desiredRankChildren = desiredRankNode.children;
  
  // Hide ranks based on filter
  showHTMLCollection(desiredRankChildren, function(option) {
    // Show only desired ranks greater than the current rank,
    // or if same rank, we are not on the last division
    // otherwise we can't keep ranking
    return (option.value > +currentRankNode.value ||
    (option.value == +currentRankNode.value && +currentDivisionNode.value < 4));
  });
  
  // Make sure that the desired ranks select contains valid value
  validateSelectValue(desiredRankNode);
  
  var desiredDivisionChildren = desiredDivisionNode.children;
  
    // Hide divisions based on filter
  showHTMLCollection(desiredDivisionChildren, function(option) {
    // If greater rank, show all divisions. If same rank,
    // show only desired divisions greater than the current divisions
    return (+desiredRankNode.value > +currentRankNode.value ||
    (+desiredRankNode.value == +currentRankNode.value && option.value > +currentDivisionNode.value));
  });
  
  // Make sure that the desired ranks select contains valid value
  validateSelectValue(desiredDivisionNode);
  
  // Now you need to start summing the prices from currentIndex
  // to desiredIndex.
  
  var accumulatedPrice = 0;
  for(var i = currentIndex; i <= desiredIndex; i++) {
    accumulatedPrice += prices[i];
  }
  
  document.getElementById('prices').value = accumulatedPrice;
  document.getElementById("prices").readOnly = true;


}

document.getElementById('divboost').addEventListener('change', function() {
  total();
})

＆＃13;

<form id="divboost" name="priceCalc" action="">
  <br/>
  <select id="CRANK1"> Current Rank
        <option value="0">Bronze</option>
        <option value="5">Silver</option>
        <option value="10">Gold</option>
    </select>
  <br>
  <br/>
  <select id="CRANK2"> Current Divison
        <option value="0">Division 5</option>
        <option value="1">Division 4</option>
        <option value="2">Division 3</option>
        <option value="3">Division 2</option>
        <option value="4">Division 1</option>
    </select>
  <br>
  <br>
  <br/>
  <br/>
  <select id="DRANK1"> Desired Rank
        <option value="0">Bronze</option>
        <option value="5">Silver</option>
        <option value="10">Gold</option>
    </select>
  <br>
  <br/>
  <select id="DRANK2"> Desired Divison
        <option value="0" disabled style="display: none">Division 5</option>
        <option value="1" selected>Division 4</option>
        <option value="2">Division 3</option>
        <option value="3">Division 2</option>
        <option value="4">Division 1</option>
    </select>
  <br>
  <br>
  <input type="text" id="prices">
  <br/>
  <br>
</form>

＆＃13;

＆＃13;

＆＃13;