如何使用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:
<script> $(document).ready(function () { var p = $("#price").find("[data-price]") $("#quantity").change(function () { var q = $(this).find(':selected').data('quantity'); var total = p * q; $("#total").text(total); }); }); </script>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:
<script> $(document).ready(function () { var p = $("#price").find("[data-price]") $("#quantity").change(function () { var q = $(this).find(':selected').data('quantity'); var total = p * q; $("#total").text(total); }); }); </script>最满意答案
您已经找到了具有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>
更多推荐
发布评论