javascript - 如何将价格乘以数量并在文本字段中显示价格？

Question

我正在尝试设置服装订单。商品的价格根据其大小而有所不同。我需要它将尺寸字段（价格）中选项的值乘以数量，然后显示总价。我猜有一些非常简单的脚本可以实现这一点，但我是一个完全的新手。

我试着修改我在这里找到的这个脚本。有什么我可以添加到此以使其工作的吗？：

<script type="text/javascript">

$(window).load(function(){
    $('form').change(function() {
    var total = 0;
    $.each($(".summable") ,function() {
        total += parseFloat($(this).val());
    });
    $("#sum").val(total)
    });
});
    </script>

这是表格：

<form><br />Shirts:
<br>Size<br>

                  <select class="summable" name="shirt size" id="shirt size">
                    <option value="0" selected="selected">Click to select</option>
                    <option value="20.00">Child(s) XSmall</option>
                    <option value="20.00">Child(s) Small</option>
                    <option value="20.00">Child(s) Medium</option>
                    <option value="20.00">Child(s) Large</option>
                    <option value="20.00">Child(s) Xlarge</option>
                    <option value="21.00">Adult XSmall</option>
                    <option value="21.00">Adult Small</option>
                    <option value="21.00">Adult Meduim</option>
                    <option value="21.00">Adult Large</option>
                    <option value="21.00">Adult XLarge</option>
                    <option value="21.00">Adult XXLarge</option>
                  </select>
<br />Quantity<br>

                  <select name="shirt quantity" id="shirt quantity">
                    <option  value="0" selected="selected">0</option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                    <option value="6">6</option>
                    <option value="7">7</option>
                    <option value="8">8</option>
                    <option value="9">9</option>
                    <option value="10">10</option>
                  </select>
<br>
<br>
<br />Jackets:
<br>Size<br>

                  <select class="summable" name="jacket size" id="jacket size">
                    <option value="0" selected="selected">Click to select</option>
                    <option value="40.00">Child(s) XSmall</option>
                    <option value="40.00">Child(s) Small</option>
                    <option value="40.00">Child(s) Medium</option>
                    <option value="40.00">Child(s) Large</option>
                    <option value="40.00">Child(s) Xlarge</option>
                    <option value="44.00">Adult XSmall</option>
                    <option value="44.00">Adult Small</option>
                    <option value="44.00">Adult Meduim</option>
                    <option value="44.00">Adult Large</option>
                    <option value="44.00">Adult XLarge</option>
                    <option value="44.00">Adult XXLarge</option>
                  </select>
<br />Quantity<br>

                  <select name="jacket quantity" id="jacket quantity">
                    <option  value="0" selected="selected">0</option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                    <option value="6">6</option>
                    <option value="7">7</option>
                    <option value="8">8</option>
                    <option value="9">9</option>
                    <option value="10">10</option>
                  </select>
<br>
<br>


Total:<input id="sum" type="text"/>

</form>

任何见解都非常感谢，谢谢。

score 1 · Accepted Answer

$(function () {
    $('select').change(function () {
        var s = $('#shirt_size option:selected').val();
        var sq = $('#shirt_quantity option:selected').val();
        var j = $('#jacket_size option:selected').val();
        var jq = $('#jacket_quantity option:selected').val();
        if (s === 0 && j === 0) {
            alert('You must select a size');
        }
        if (sq === 0 && jq === 0) {
            alert('You must select a quantity');
        }
        var stotal = s * sq;
        var jtotal = j * jq;
        var total = stotal + jtotal;
        $('#sum').val(total);
    });
});

像这样的东西可以解决问题..（如果你清理了 HTML，那就是）

score 0 · Accepted Answer

这应该为您完成工作：

$(document).ready(function()
{
    $('form').change(function()
    {
       var total = 0;
       $.each($(".summable") ,function()
       {
          var price = parseFloat($(this).val()),
              qty = parseInt($(this).nextAll("select:first").val());

          total += price*qty;
       });
       $("#sum").val(total)
    });
});

此处示例：http: //jsfiddle.net/vmD85/7/

score 0 · Accepted Answer

考虑一个像这样的结构

<form>
    <fieldset class="itemgroup">
        <select class="size">
            <option value="0" disabled selected>Size</option>
            <option value="10.00">Regular</option>
            <option value="15.00">Large</option>
        </select>
        <select class="quantity">
            <option value="0" disabled selected>Quantity</option>
            <option value="0">Zero</option>
            <option value="1">One</option>
            <option value="2">Two</option>
            <option value="3">Three</option>
        </select>
    </fieldset>
</form>

现在获取<select>s 然后它们的值并相乘，因为我们正在一个支持表单更改事件的节点内工作，并且可以成为表单元素的祖先。

$('.itemgroup').change(function () {
    var size = parseFloat(this.getElementsByClassName('size')[0].value),
        quantity = parseFloat(this.getElementsByClassName('quantity')[0].value);
    console.log(size, quantity, size * quantity);
});

演示

score 0 · Accepted Answer

在这里：这应该可以解决问题。:)

我已经修复了一些代码。我所做的一些更改：

我删除了很多的<br>。
我创建了一个函数 total 来包含您的更新代码
我将每种类型都包含在<div>一个类名“typegroup”中，我首先要使用该类名，.closest()然后查找我用类“quantity”标记的质量字段。我使用类来查找每个类，因此它们对于每种类型都是可重复的（它们不必是唯一的）。
我将“衬衫尺寸”等字段更改为“衬衫尺寸”，因为它们必须是一个词。

这是工作示例：

<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
        <script>
            total = function(){
                $('form').change(function() {
                    var total = 0;
                    $(".summable").each(function() {
                        total += parseFloat($(this).val() * $(this).closest(".typegroup").find(".quantity").val());
                    });
                    $("#sum").val(total)
                });
            }
            $(document).ready(function(){
                total();
            });
    </script>
    </head>
    <body>
        <form>
            <div class="typegroup">
                <div>Shirts:</div>
                <div>Size: <span>
                    <select class="summable" name="shirt_size" id="shirt_size">
                        <option value="0" selected="selected">Click to select</option>
                        <option value="20.00">Child(s) XSmall</option>
                        <option value="20.00">Child(s) Small</option>
                        <option value="20.00">Child(s) Medium</option>
                        <option value="20.00">Child(s) Large</option>
                        <option value="20.00">Child(s) Xlarge</option>
                        <option value="21.00">Adult XSmall</option>
                        <option value="21.00">Adult Small</option>
                        <option value="21.00">Adult Meduim</option>
                        <option value="21.00">Adult Large</option>
                        <option value="21.00">Adult XLarge</option>
                        <option value="21.00">Adult XXLarge</option>
                    </select>
                </span></div>
                <div>Quantity: <span> 
                    <select class="quantity" name="shirt_quantity" id="shirt_quantity">
                        <option  value="0" selected>0</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                        <option value="6">6</option>
                        <option value="7">7</option>
                        <option value="8">8</option>
                        <option value="9">9</option>
                        <option value="10">10</option>
                    </select>
                </span></div>
            </div>
            <br>
            <div class="typegroup">
                <div>Jackets:</div>
                <div>Size: <span>
                    <select class="summable" name="jacket_size" id="jacket_size">
                        <option value="0" selected="selected">Click to select</option>
                        <option value="40.00">Child(s) XSmall</option>
                        <option value="40.00">Child(s) Small</option>
                        <option value="40.00">Child(s) Medium</option>
                        <option value="40.00">Child(s) Large</option>
                        <option value="40.00">Child(s) Xlarge</option>
                        <option value="44.00">Adult XSmall</option>
                        <option value="44.00">Adult Small</option>
                        <option value="44.00">Adult Meduim</option>
                        <option value="44.00">Adult Large</option>
                        <option value="44.00">Adult XLarge</option>
                        <option value="44.00">Adult XXLarge</option>
                    </select>
                </span></div>
                <div>Quantity: <span> 
                    <select class="quantity" name="jacket_quantity" id="jacket_quantity">
                        <option  value="0" selected>0</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                        <option value="6">6</option>
                        <option value="7">7</option>
                        <option value="8">8</option>
                        <option value="9">9</option>
                        <option value="10">10</option>
                    </select>
                </span></div>
            </div>
            <br>
            <div>Total: <input id="sum" type="text"/></div>
        </form>
    </body>
</html>

javascript - 如何将价格乘以数量并在文本字段中显示价格？

4 回答 4

Related

Reference