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

我正试图建立一个服装订单。这件物品的价格因大小而异。我需要它将大小字段中的选项值（价格）乘以数量，然后显示总价。我猜有一些相当简单的脚本来实现这一点，但我完全是个新手

我试着修改我在这里找到的脚本。是否有什么我可以添加到这一点，使其工作

<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'）.change（function（）{
var合计=0；
$.each（$（“.summable”），函数（）{
total+=parseFloat（$（this.val（））；
});
美元（“#总和”）.val（总计）
});
});

以下是表格：

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

衬衫：

大小

单击以选择
儿童购物中心
幼儿
儿童中等
儿童大型
儿童大
成人购物中心
成体小
成虫
成虫大
成人XLarge
成人XXL码

数量

0
1.
2.
3.
4.
5.
6.
7.
8.
9
10





夹克：

大小

单击以选择
儿童购物中心
幼儿
儿童中等
儿童大型
儿童大
成人购物中心
成体小
成虫
成虫大
成人XLarge
成人XXL码

数量

0
1.
2.
3.
4.
5.
6.
7.
8.
9
10




总数：

---

非常感谢您的任何见解。

请考虑以下结构

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

---

像这样的东西就行了。。（如果您清理了HTML，也就是说）

这将为您完成以下工作：

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

示例如下：

---

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

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

• 我删除了很多

• 我创建了一个包含更新代码的函数total
• 我用一个类名“typegroup”将每种类型都括在一个
  中，我首先使用

  .closest（）

  查找该类名，然后向下查找标有类“quantity”的质量字段。我使用类来查找每一个，这样它们对于每一种类型都是可重复的（它们不必是唯一的）
• 我将“shirt size”等字段更改为“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>

总计=函数（）{
$（'form'）.change（function（）{
var合计=0；
$（“.summable”）.each（函数（）{
total+=parseFloat（$（this.val（）*$（this.typegroup））.find（“.quantity”）.val（））；
});
美元（“#总和”）.val（总计）
});
}
$（文档）.ready（函数（）{
总数（）；
});
衬衫：
尺寸：
单击以选择
儿童购物中心
幼儿
儿童中等
儿童大型
儿童大
成人购物中心
成体小
成虫
成虫大
成人XLarge
成人XXL码
数量：
0
1.
2.
3.
4.
5.
6.
7.
8.
9
10


夹克：
尺寸：
单击以选择
儿童购物中心
幼儿
儿童中等
儿童大型
儿童大
成人购物中心
成体小
成虫
成虫大
成人XLarge
成人XXL码
数量：
0
1.
2.
3.
4.
5.
6.
7.
8.
9
10


总数：

在名称或id属性中有空格是非常不规则的。我只是在其中写了一些来说明它们是什么，页面上有很多产品，我只使用“s1s”“s1q”来表示大小和数量等

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

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