0

你好，我正在制作一个购物车系统，但我被困在总产品数量的计算中，我希望用户从下拉列表中选择一个价格，然后在输入数量时它会更新总瞬间，另一个也是如此项目 。我为结构做了一个 js fiddle 任何人都可以通过简单的 javascript 帮助我实现这一点吗？

http://jsfiddle.net/nVCY4/25/

下拉结构就像

<select id="TIPR1" class="table-select" title="Please select">
   <option value="31">Field Box $31</option>
   <option value="29">Lodge Box $29</option>
   <option value="19">Bleachers $19</option>
</select>


function CalculateTotal(frm) {
    var order_total = 0

    // Run through all the form fields
    for (var i=0; i < frm.elements.length; ++i) {

        // Get the current field
        form_field = frm.elements[i]

        // Get the field's name
        form_name = form_field.name

        // Is it a "product" field?
        if (form_name.substring(0,4) == "TIQT") {

            // If so, extract the price from the name
            //item_price = parseFloat(form_name.substring(form_name.lastIndexOf("_") + 1))
            var test = "TIPR1,TIPR2";
            //test = test + i;
            var e = document.getElementById(test);
            item_price = e.options[e.selectedIndex].value;

            // Get the quantity
            item_quantity = parseInt(form_field.value)

            // Update the order total
            if (item_quantity >= 0) {
                order_total += item_quantity * item_price
            }
        }
    }

    // Display the total rounded to two decimal places
    document.getElementById("order_total").firstChild.data = "$" + 
}
4

3 回答 3

1

我确实鼓励你自己尝试一些东西，绝对最好的学习方式就是做事。

如果你包含 jQuery 或类似的库，这很容易。

这是一个例子：http: //jsfiddle.net/nVCY4/26/

var selects = $('select');
var inputs = $('input');
selects.change(calculate);
inputs.keyup(calculate);

function calculate(){
    var runningTotal = 0;
    selects.each(function(i){
        var val = parseInt($(this).val());
        var qty = inputs.eq(i).val();
        runningTotal += (val*qty);
    });
    $('#grandtotal').html("Grand-total: "+runningTotal);
}​
于 2012-11-27T20:16:39.423 回答
0

Here is a possible solution.. actually, several possible solutions. I don't know how these fields look in the context of the entire form. So one of the methods I show below may work better for you than another one.

I have updated your HTML code only a tiny bit: I made the IDs on the SELECT elements unique so that they could be called easily from the JS.

In the JS code there are three different ways to call your fields and get the values. ONLY ONE must be allowed to run. The others need to be removed or commented out.

This also goes for the bottom portion where you set the value of the total. You did not provide HTML that shows what the order total looks like. So I provided samples for several different ways.

This code is untested, and provided as a way to show you possible solutions to this issue. There are at least 10 more that I can think of off the top of my head, but these are (I think) the best match for the HTML code sample you have provided.

<div id="content">
    <table border="1">
        <tr>
            <th>Book Cover</th>
            <th>Title & Author</th>
            <th>Price</th>
            <th>Quantity</th>
        </tr>
        <tr>
            <td class="image">
                <a href="cover2.html" onClick="return openNewWindow(this.href, 475, 725);"><img alt="Book Cover" src="images/covers/2artfielding.png" /></a>
            </td>
            <td class="title">
                <p class="table"><b>The Art of Fielding</b></p>
                <p class="table"><i>by Chad Harbach</i></p>
            </td>
            <td class="price">
               <select id="TIPR1" class="table-select" title="Please select">
                    <option value="31">Field Box $31</option>
                    <option value="29">Lodge Box $29</option>
                    <option value="19">Bleachers $19</option>
                </select>
            </td>
            <td class="quantity">
                <input type="text" id="artquantity" value="1" /><br />
            </td>
        </tr>
        <tr>
            <td class="image"><a href="cover5.html" onClick="return openNewWindow(this.href,475, 725);"><img alt="Book Cover" src="images/covers/18thelovers.png" /></a></td>

            <td class="title">
                <p class="table"><b>The Lover's Dictionary</b></p>
                <p class="table"><i>by David Levithan</i></p>
            </td>
            <td class="price">
               <select id="TIPR2" class="table-select" title="Please select">
                    <option value="31">Field Box $31</option>
                    <option value="29">Lodge Box $29</option>
                    <option value="19">Bleachers $19</option>
                </select>
            </td>

            <td class="quantity">
                <input type="text" id="loverquantity" value="1" /><br />
            </td>
        </tr>

        <tr>
            <td class="image"><a href="cover4.html)" onClick="return openNewWindow(this.href,475, 725);"><img alt="Book Cover" src="images/covers/11nightcircus.png" /></a></td>
            <td class="title">
                <p class="table"><b>The Night Circus</b></p>

                <p class="table"><i>by Erin Morgenstern</i></p>
            </td>
            <td class="price">
               <select id="TIPR3" class="table-select" title="Please select">
                    <option value="31">Field Box $31</option>
                    <option value="29">Lodge Box $29</option>
                    <option value="19">Bleachers $19</option>
                </select>
            </td>
            <td class="quantity">
                <input type="text" id="nightquantity" value="1" /><br />
            </td>

        </tr>
        </table>
        <br />
        <p class="totals" id="grandtotal">Grand-total:</p>
</div>

<script type="text/javascript">
function CalculateTotal(frm) {
    var order_total = 0.00;
    var form_select, form_input;

    //*****************************************************************
    //Option 1: Call the fields directly
    //*****************************************************************
    form_select = document.getElementById("TIPR1");
    form_input = document.getElementById("artquantity");
    order_total += (parseFloat(form_select.options[form_select.selectedIndex].value) * parseFloat(form_input.value));

    form_select = document.getElementById("TIPR2");
    form_input = document.getElementById("loverquantity");
    order_total += (parseFloat(form_select.options[form_select.selectedIndex].value) * parseFloat(form_input.value));

    form_select = document.getElementById("TIPR3");
    form_input = document.getElementById("nightquantity");
    order_total += (parseFloat(form_select.options[form_select.selectedIndex].value) * parseFloat(form_input.value));
    //*****************************************************************


    //*****************************************************************
    //Option 2: Create an array and loop through them
    //*****************************************************************
    var selectIDs = ["TIPR1", "TIPR2", "TIPR3"];
    var inputIDs  = ["artquantity", "loverquantity", "nightquantity"];

    foreach(var i in selectIDs) {
        form_select = document.getElementById(selectIDs[i]);
        form_input = document.getElementById(inputIDs[i]);
        order_total += (parseFloat(form_select.options[form_select.selectedIndex].value) * parseFloat(form_input.value));
    }
    //*****************************************************************


    //*****************************************************************
    //Option 3: Assuming there are the same number of SELECTs as INPUTs
    //*****************************************************************
    var selects = document.getElementById("content").getElementsByTagName("select");
    var inputs  = document.getElementById("content").getElementsByTagName("input");

    foreach(var i in selects) {
        form_select = selects[i];
        form_input = inputs[i];
        order_total += (parseFloat(form_select.options[form_select.selectedIndex].value) * parseFloat(form_input.value));
    }
    //*****************************************************************


    //*****************************************************************
    //Display the total rounded to two decimal places
    //*****************************************************************
    tot_val = "$" + parseFloat(order_total).toFixed(2);

    //I don't know what "order_total" is here since you didn't show it in an example...
    // - Here is the code to set it if it's an input
    document.getElementById("order_total").value = tot_val;

    // - ...if it's a block level element like a DIV or P
    document.getElementById("order_total").innerHTML = tot_val;

    // - ...or if it's a block level child of the element
    document.getElementById("order_total").firstChild.innerHTML = tot_val;
    //*****************************************************************
}
</script>
于 2012-11-27T21:41:43.300 回答
0

将您想要的逻辑添加到 onchange 事件中，如下所示：

<select id="TIPR1" onchange="f()" class="table-select" title="Please select">

其中 f 是选择某些内容时要调用的函数。

于 2012-11-27T20:12:52.320 回答