如何使用Jquery使用数量选项列表设置总价格(How to set Total Price with a quantity option list using Jquery)

我只是在选择1-5的数量时动态调整总价。我是新手使用Jquery所以非常感谢任何帮助，谢谢！

HTML：

<table> <thead> <tr> <th>Quantity</th> <th>Price</th> </tr> </thead> <tbody> <tr> <td> <select id="quantity"> <option data-quantity="1">1</option> <option data-quantity="2">2</option> <option data-quantity="3">3</option> <option data-quantity="4">4</option> </select> </td> <td id="price" data-price="@i.Price">$@i.Price</td> </tr> </tbody> </table> <p>Total Price: $<span id="total></span></p>

JAVASCRIPT：

I'm just trying to adjust the total price dynamically when a quantity from 1-5 is selected. I am new to using Jquery so any help is greatly appreciated, thank you!

HTML:

<table> <thead> <tr> <th>Quantity</th> <th>Price</th> </tr> </thead> <tbody> <tr> <td> <select id="quantity"> <option data-quantity="1">1</option> <option data-quantity="2">2</option> <option data-quantity="3">3</option> <option data-quantity="4">4</option> </select> </td> <td id="price" data-price="@i.Price">$@i.Price</td> </tr> </tbody> </table> <p>Total Price: $<span id="total></span></p>

JAVASCRIPT:

最满意答案

您已经找到了具有ID price的元素，因此只需获取它的data-price 。

$(document).ready(function () {
    const p = $("#price").data('price');

    $("#quantity").change(function () {
        const q = $(this).find(':selected').data('quantity');
        const total = p * q;
        $("#total").text(total);
    });
}); 
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <thead>
        <tr>
            <th>Quantity</th>
            <th>Price</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <select id="quantity">
                    <option data-quantity="1">1</option>
                    <option data-quantity="2">2</option>
                    <option data-quantity="3">3</option>
                    <option data-quantity="4">4</option>
                </select>
            </td>
            <td id="price" data-price="1000">1000</td>
        </tr>
    </tbody>
</table>

<p>Total Price: $<span id="total"></span></p> 
  
 
You already find the element with id price, so just get the data-price of it.  
 
  
  $(document).ready(function () {
    const p = $("#price").data('price');

    $("#quantity").change(function () {
        const q = $(this).find(':selected').data('quantity');
        const total = p * q;
        $("#total").text(total);
    });
}); 
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <thead>
        <tr>
            <th>Quantity</th>
            <th>Price</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <select id="quantity">
                    <option data-quantity="1">1</option>
                    <option data-quantity="2">2</option>
                    <option data-quantity="3">3</option>
                    <option data-quantity="4">4</option>
                </select>
            </td>
            <td id="price" data-price="1000">1000</td>
        </tr>
    </tbody>
</table>

<p>Total Price: $<span id="total"></span></p>

更多推荐