如何只使用一次 select 选项中的值？

Question

我正在建立一个在线商店。最终用户从下拉列表中选择 select 选项中的一个选项，然后将该选项的价格添加到主价格中。

<div id='custom-price'>1000</div>

<select id="capsize-price" onchange="changePri()" name="capsize-price">
 <option value='100'>100</option>
 <option value='700'>700</option>
</select>

  function changePri() {
   var customPrice = parseFloat(document.querySelector("#custom-price").textContent);
   var capsizePrice = document.querySelector("#capsize-price").value;

   var price = customPrice + capsizePrice;
   document.querySelector("#custom-price").textContent = price;
  }

我已经明白了，但后来我注意到价格一直在上涨。例如，如果最终用户 select 首先只选择选项 1(100)，然后 select 只选择选项 2 (700)，它会添加两者的价格。

我知道这是根据我的代码应该做的，但我正在努力想出关于如何在用户 select 时只添加选项 1 然后只添加选项的逻辑2 当用户 select 选项 2 而不是它现在正在做的事情时。

感谢任何帮助。

Answer 1

你的逻辑是一旦用户选择了 capsize-price 就不可能知道原价是多少。您需要将 custom-price 的原始值存储在某处，并在生成最终价格时使用它。例如：

<div id='original-price'>1000</div>
<div id='custom-price'></div>

<select id="capsize-price" onchange="changePri()" name="capsize-price">
 <option value='100'>100</option>
 <option value='700'>700</option>
</select>

  function changePri() {
   var originalPrice = parseFloat(document.querySelector("#original-price").textContent);
   var capsizePrice = document.querySelector("#capsize-price").value;

   var customPrice = originalPrice + capsizePrice;
   document.querySelector("#custom-price").textContent = customPrice;
  }

Answer 2

不确定这是否是您要查找的内容？

function changePri() {
   var capsizePrice = parseInt(document.querySelector("#capsize-price").value);
   var price = basePrice + capsizePrice;
   document.querySelector("#custom-price").textContent = price;
}
  
const basePrice = 1000;  
document.querySelector("#custom-price").textContent = basePrice;

<div id='custom-price'></div>
<select id="capsize-price" onchange="changePri()" name="capsize-price">
 <option value='100'>100</option>
 <option value='700'>700</option>
</select>

基本上将您的 "base price" 放入一个 JS 常量中，然后将选择添加到其中。您可能应该使用处理程序而不是调用内联函数。

如何只使用一次 select 选项中的值？

How to use the value in a select option just once?

javascript

html

select

shopping-cart