计算 select 选项的值并将其传递给输入框

Question

我是 HTML 和 JavaScript 的新手。我需要做一个网站，它需要根据 select 选项总结总价值。之后，将值传回 HTML.

中的输入

HTML代码

        <select class="normalinput" name="giftname" id="giftname" onchange="populate('giftname')">
            <option value="None">None</option>
            <option value="G0001">Big Graduation Bear +RM60.00</option>
            <option value="G0002">Small Graduation Bear +RM20.00</option>
            <option value="G0003">Handcraft Gift Card +RM5.00</option>
            <option value="G0004">Valentine Gift Card +RM10.00</option>
            <option value="G0005">Godiva Chocolate Box +RM100.00</option>
            <option value="G0006">Ferrero Rocher Love Box +RM90.00</option>                                                                          
        </select>
            <p class="total"> Total: RM <input type="number" name="total" id="total"></p>

JavaScript代码

<script type="text/javascript">
    function populate(giftname) {
        var giftname = document.getElementById(giftname);
        var gg = giftname.options[giftname.selectedIndex].value;
        var total;
        
    if (gg.value == "G0001") {
        total = 90 + 60;
        document.getElementById("total").value = total;
    } 
    else if (gg.value == "G0002") {
        total = 90 + 20;
        document.getElementById("total").value = total;
    } 
    else if (gg.value == "G0003") {
        total = 90 + 5;
        document.getElementById("total").value = total;
    } 
    else if (gg.value == "G0004") {
        total = 90 + 10;
        document.getElementById("total").value = total;
    } 
    else if (gg.value == "G0005") {
        total = 90 + 100;
        document.getElementById("total").value = total;
    } 
    else if (gg.value == "G0006") {
        total = 90 + 90;
        document.getElementById("total").value = total;
    } 
    else 
    total = 90;
    document.getElementById("total").value = total;
    }
    </script>

A screenshot of result needed

非常感谢。

Answer 1

您可以将 data attribute 添加到 HTML 选项元素以包含价格并使用它来计算总价。

<select class="normalinput" name="giftname" id="giftname" onchange="populate('giftname')">
  <option data-price="0" value="None">None</option>
  <option data-price="60" value="G0001">Big Graduation Bear +RM60.00</option>
  <option data-price="20" value="G0002">Small Graduation Bear +RM20.00</option>
  <option data-price="5" value="G0003">Handcraft Gift Card +RM5.00</option>
  <option data-price="10" value="G0004">Valentine Gift Card +RM10.00</option>
  <option data-price="100" value="G0005">Godiva Chocolate Box +RM100.00</option>
  <option data-price="90" value="G0006">Ferrero Rocher Love Box +RM90.00</option>
</select>
<p class="total"> Total: RM <input type="number" name="total" id="total"></p>

<script type="text/javascript">
  populate('giftname');

  function populate(giftnameId) {
    var giftnameSelect = document.getElementById(giftnameId); // Select dropdown
    let selectedOption = giftnameSelect.options[giftnameSelect.selectedIndex]; // Selected option
    // Get the selected value. We need the plus to parse it to a number, because initially its a string.
    var selectedGiftnameValue = +selectedOption.dataset.price;
    var total = 90 + selectedGiftnameValue;
    document.getElementById("total").value = total;
  }
</script>

Answer 2

您可以尝试更简单的方法。假设你想要我添加的美元价值

return total.value = Number.parseFloat(price).toFixed(2);

如果没有将上面的行替换为

total.value = price;

var price;
var total = document.getElementById('total');
var gg = document.getElementById('giftname');

gg.onchange = function() {
if (gg.value == "G0001") {
        price = 90 + 60;

    } 
    else if (gg.value == "G0002") {
        price = 90 + 20;

    } 
    else if (gg.value == "G0003") {
        price = 90 + 5;
    } 
    else if (gg.value == "G0004") {
        total = 90 + 10;
    } 
    else if (gg.value == "G0005") {
        price = 90 + 100;
    } 
    else if (gg.value == "G0006") {
        price = 90 + 90;
    } 
    else {
    price = 90;
  }  

   return total.value = Number.parseFloat(price).toFixed(2);

}

<select class="normalinput" name="giftname" id="giftname" \>
  <option value="None">None</option>
  <option value="G0001">Big Graduation Bear +RM60.00</option>
  <option value="G0002">Small Graduation Bear +RM20.00</option>
  <option value="G0003">Handcraft Gift Card +RM5.00</option>
  <option value="G0004">Valentine Gift Card +RM10.00</option>
  <option value="G0005">Godiva Chocolate Box +RM100.00</option>
  <option value="G0006">Ferrero Rocher Love Box +RM90.00</option>
</select>
<p class="total"> Total: RM <input type="number" name="total" id="total" ></p>

计算 select 选项的值并将其传递给输入框

Calculate and Passing Value from select option to input box

html

javascript

select

sum

calculator