Javascript “我的快速查看”页面的实时计算

我正在开发自己的超市网站， 我有工作现场计算脚本取自webiste，如果应用于我的弹出页面进行现场计算，例如：1kg大米（$200）x 2数量=400$。 此概念应用于此页面，但不起作用。 请派人来帮我。 基本上，我需要根据数量和公斤选择活计算

$（'#size'）。更改（函数（）{
updateValue（）；
});
$（'#数量'）.keyup（函数（）{
updateValue（）；
});
函数updateValues（）{
//删除所有以前设置的值
$（“#显示#框，#总计#框”）.empty（）；
变量数量=document.getElementById（“数量”）值；
var价格=0；
var率=0；
$（'#size'）。查找（'option:selected'）。每个（函数（）{
//检查该属性是否存在，以便任何未设置的值都不会麻烦
if（$（this.attr（'data-price'））{
价格=$（此）.data（'price'）；
费率=价格*数量；
$（'show#u box'）。追加（''+费率+''）；
}
});
$（“#总计#方框”）。文本（费率）；
}

分享这个：











制造商：
可利用性：
库存20件
产品代码：
PS06

莫里斯发酵菌。塞德·拉奥里特·阿利奎姆·利奥。这是多洛，埃吉特，元素，元素，精英。埃尼亚拍卖人维西和乌尔纳


9.99美元5.99美元
尺寸：
选课
1公斤
2公斤
3公斤
4公斤
数量：
-
-
+
添加到购物车
添加到愿望列表
添加以比较

因此也将更改事件添加到文本框中

$('#wow, #qty').change(function() {

---

只需通过结石治疗创建一个功能。 并对每个表单元素的特定事件调用该函数：

change

用于选择，

keyup

用于输入文本

$('#wow').change(function() {
    updateValues();
});

$('#qty').keyup(function() {
    updateValues();
});

function updateValues(){
    // Remove any previously set values
    $('#show_box, #total_box').empty();
    var qty =  document.getElementById("qty").value;
    var price = 0;
    var rate = 0;    
    $('#wow').find('option:selected').each(function() {
        // Check that the attribute exist, so that any unset values won't bother
        if ($(this).attr('data-price')) {             
            price = $(this).data('price');
            rate = price*qty;
            $('#show_box').append('<h6>' + rate + '</h6>');
        }
    });
    $('#total_box').text(rate);
}

HTML:

<p id="product_price">Choose a product</p>
<!-- - - - - - - - - - - - - - Product size - - - - - - - - - - - - - - - - -->
<div class="description_section_2 v_centered">              
    <span class="title">Size:</span>
    <div class="custom_select min">
        <select id="size" >
            <option id="def" value="default" selected>select a course</option>
            <option id="mth" data-price="100" value="1">1 kg</option>
            <option id="eng" data-price="200" value="2">2 kg</option>
            <option id="chm" data-price="300" value="3">3 kg</option>
            <option id="phy" data-price="400" value="4">4 kg</option>
        </select>
    </div>
</div>
<!-- - - - - - - - - - - - - - End of product size - - - - - - - - - - - - - - - - -->

<!-- - - - - - - - - - - - - - Quantity - - - - - - - - - - - - - - - - -->
<div class="description_section_2 v_centered">
    <span class="title">Qty:</span>
    <div class="qty min clearfix">
        <button class="theme_button" data-direction="minus">&#45;</button>
        <input type="text" value="2" id="qty">
        <button class="theme_button" data-direction="plus">&#43;</button>
</div>
<!-- - - - - - - - - - - - - - End of quantity - - - - - - - - - - - - - - - - -->

选择一种产品

尺寸： 选课 1公斤 2公斤 3公斤 4公斤 数量： - +

---

php部分在哪里？感谢您的快速回复，它正在工作。而且，我在弹出页面中应用了这个编码，它不起作用。。请帮忙。 - + 您能否更新您的问题并创建第二部分，其中包含有关您的编码弹出窗口的信息，因为我无法理解此评论中的任何内容。我刚刚重新更新了我的问题，请解决此问题，这将对此非常有帮助。非常感谢您的支持，它的工作，但数量值未显示1,2,3，反之亦然。它出现在1，10，20你可以在这个链接中看到这个打开快速购物车页面。

<p id="product_price">Choose a product</p>
<!-- - - - - - - - - - - - - - Product size - - - - - - - - - - - - - - - - -->
<div class="description_section_2 v_centered">              
    <span class="title">Size:</span>
    <div class="custom_select min">
        <select id="size" >
            <option id="def" value="default" selected>select a course</option>
            <option id="mth" data-price="100" value="1">1 kg</option>
            <option id="eng" data-price="200" value="2">2 kg</option>
            <option id="chm" data-price="300" value="3">3 kg</option>
            <option id="phy" data-price="400" value="4">4 kg</option>
        </select>
    </div>
</div>
<!-- - - - - - - - - - - - - - End of product size - - - - - - - - - - - - - - - - -->

<!-- - - - - - - - - - - - - - Quantity - - - - - - - - - - - - - - - - -->
<div class="description_section_2 v_centered">
    <span class="title">Qty:</span>
    <div class="qty min clearfix">
        <button class="theme_button" data-direction="minus">&#45;</button>
        <input type="text" value="2" id="qty">
        <button class="theme_button" data-direction="plus">&#43;</button>
</div>
<!-- - - - - - - - - - - - - - End of quantity - - - - - - - - - - - - - - - - -->