0

衣類の注文フォームを設定しようとしています。商品の価格はサイズによって異なります。サイズ フィールドのオプションの値 (価格) に数量を掛けて、合計価格を表示するために必要です。これを実現するためのかなり単純なスクリプトがあると思いますが、私はまったくの初心者です。

ここで見つけたこのスクリプトをいじってみました。これを機能させるためにこれに追加できるものはありますか?:

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

どんな洞察でも大歓迎です、ありがとう。

4

4 に答える 4

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をクリーンアップした場合、つまり）

于 2013-07-08T23:01:03.930 に答える
0

これはあなたのために仕事をするはずです:

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

于 2013-07-08T23:02:43.373 に答える
0

のような構造を考えてみましょう

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

デモ

于 2013-07-08T22:59:59.823 に答える