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>

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

Answer 1

$(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，那就是）

Answer 2

考虑像

这样的结构

<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);
});

Demo

Answer 3

这应该适合你：

$(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/

Answer 4

这里：这应该可以解决问题。：）

我修了一些代码。我做的一些改变：

我删除了很多<br>。
我创建了一个包含更新代码的函数total
我将<div>中的每个类型都附加了一个类名为“typegroup”的类型，我首先使用.closest()来查找，然后搜索我标有“数量”类的质量字段。我使用类来查找每个类，因此它们对于每种类型都是可重复的（它们不是唯一的）。
我将“衬衫大小”等字段更改为“shirt_size”，因为它们需要一个字。

以下是工作示例：

<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>

如何在文本字段中按数量和显示价格乘以价格？

4 个答案: