无法使用 jquery 计算下拉列表 select 值
[英]Couldn't calculate drop down list select value using jquery
问题描述
我正在使用 jquery 创建一个简单的库存系统。问题是当我计算产品时，我们有两个选项 GR 和 KG。 如果我 select 作为 GR，则需要计算 GR 计算部分，如果我 select 作为 KG，则需要计算 KG 计算部分。图片。
表单设计
<nav class="navbar navbar-dark bg-dark">
<span class="navbar-brand mb-0 h1">Restaurant Coffee Shop Pos</span>
</nav>
<tr>
<td>
<input type="checkbox" name="pos" value="Suger">
<label>Suger</label>
</td>
<td>
<input type="number" name="qty" id="qty" size="10px">
</td>
<td>
<select class="form-control" id="option" name="option"
placeholder="option" required>
<option value="">Please Select</option>
<option value="1">GR</option>
<option value="2">KG</option>
</select>
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="pos" value="Tea">
<label>Tea</label>
</td>
<td>
<input type="number" name="qty" size="10px">
</td>
<td>
<select class="form-control" id="option" name="option"
placeholder="Plan" required>
<option value="">Please Select</option>
<option value="1">GR</option>
<option value="2">KG</option>
</select>
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="pos" value="Flour">
<label> Flour</label>
</td>
<td>
<input type="number" name="qty" size="10px">
</td>
<td>
<select class="form-control" id="option" name="option"
placeholder="option" required>
<option value="">Please Select</option>
<option value="1">GR</option>
<option value="2">KG</option>
</select>
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="pos" value="Rice">
<label> Rice</label>
</td>
<td>
<input type="number" name="qty" size="10px">
</td>
<td>
<select class="form-control" id="status" name="status"
placeholder="Ricestatus" required>
<option value="">Please Select</option>
<option value="1">GR</option>
<option value="2">KG</option>
</select>
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="pos" value="Dhall">
<label> Dhall</label>
</td>
<td>
<input type="number" name="qty" size="10px">
</td>
<td>
<select class="form-control" id="Dhallstatus" name="status"
placeholder="status" required>
<option value="">Please Select</option>
<option value="1">GR</option>
<option value="2">KG</option>
</select>
</td>
</tr>
</table>
<input type="button" class="btn btn-info" onclick="Add()" value="Ok" name="Ok" id="Ok">
</div>
</form>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="container">
<div class="list-group-item list-group-tem-action active">AddProducts</div>
<table id="tbl-item" class="table table-dark table-bordered" cellspacing="0" width="100%" align="center">
<thead>
<tr>
<th>Delete</th>
<th>Item</th>
<th>Price</th>
<th>Qty</th>
<th>Total</th>
</tr>
<tbody>
</tbody>
</table>
</div>
</div>
<div class="col-sm-2">
<div class="list-group-item list-group-item-action active">Bill</div>
<div>
<label>Total</label>
<input type="text" style="color: yellow; background: black; font-size: 30px;" id="total" name="total" placeholder="Total" required>
</div>
</br>
<div>
<input type="button" class="btn btn-warning" value="Reset" name="reset" id="reset">
</div>
</div>
</div>
jQuery
<script type="text/javascript">
var tot = 0;
var total = 0;
function Add()
{
$("input[name='pos']:checked").each(function() {
// Get the value
let check = $(this).val();
var price = null;
var sugerstatus = $('#Sugerstatus :selected').text();
if (check == "Suger") {
price = 12;
}
else if (check == "Village Fries") {
price = 15;
} else if (check == "Fries") {
price = 35;
}
else if (check == "Tea")
{
price = 10;
}
else if (check == "Coffee")
{
price = 32;
}
else if (check == "Apple Juice")
{
price = 25;
}
else if (check == "Orange Juice")
{
price = 45;
}
var qty = $(this).closest("tr").find('[name="qty"]').val() || 0;
tot = qty * price;
$("#option").each(function()
{
if ($(this).val() == 2){
var calamount = (
qty * 140 );
$("#total").val(calamount);
}
if ($(this).val() == 1)
{
var calamount = (qty /1000 * 140 );
$("#total").val(calamount);
}
});
var table1 =
"<tr>" +
"<td><button type='button' name='record' class='btn btn-warning' onclick='deleterow(this)'>Delete </td>" +
"<td>" + check + "</td>" +
"<td>" + price + "</td>" +
"<td>" + qty + "</td>" +
"<td>" + tot + "</td>" +
"</tr>";
total += Number(tot);
$('#total').val(total);
$("#tbl-item tbody").append(table1);
});
}
function deleterow(e)
{
total_cost = parseInt($(e).parent().parent().find('td:last').text(),10);
total -= total_cost;
$('#total').val(total);
$(e).parent().parent().remove();
}
$('#reset').click(function()
{
location.reload();
}
);
</script>
这里
有GR值1 KG值2
$("#option").each(function()
{
if ($(this).val() == 2){
var calamount = (
qty * 140 );
$("#total").val(calamount);
}
if ($(this).val() == 1)
{
var calamount = (qty /1000 * 140 );
$("#total").val(calamount);
}
1 个解决方案
解决方案1
0 已采纳 2021-05-03 12:18:52
var tot = 0; var total = 0; function Add() { $("input[name='pos']:checked").each(function() { // Get the value let check = $(this).val(); var price = null; var sugerstatus = $('#Sugerstatus:selected').text(); if (check == "Suger") { price = 12; } else if (check == "Village Fries") { price = 15; } else if (check == "Fries") { price = 35; } else if (check == "Tea") { price = 10; } else if (check == "Coffee") { price = 32; } else if (check == "Apple Juice") { price = 25; } else if (check == "Orange Juice") { price = 45; } var qty = $(this).closest("tr").find('[name="qty"]').val() || 0; tot = qty * price; var sel = $(this).closest("tr").find("select"); if (sel.val() == 2) { var calamount = ( qty * 140); $("#total").val(calamount); console.log("val", sel.val(), calamount); } if (sel.val() == 1) { var calamount = (qty / 1000 * 140); $("#total").val(calamount); console.log("val", sel.val(), calamount); } var table1 = "<tr>" + "<td><button type='button' name='record' class='btn btn-warning' onclick='deleterow(this)'>Delete </td>" + "<td>" + check + "</td>" + "<td>" + price + "</td>" + "<td>" + qty + "</td>" + "<td>" + tot + "</td>" + "</tr>"; total += Number(tot); $('#total').val(total); $("#tbl-item tbody").append(table1); }); } function deleterow(e) { total_cost = parseInt($(e).parent().parent().find('td:last').text(), 10); total -= total_cost; $('#total').val(total); $(e).parent().parent().remove(); } $('#reset').click(function() { location.reload(); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"></script> <nav class="navbar navbar-dark bg-dark"> <span class="navbar-brand mb-0 h1">Restaurant Coffee Shop Pos</span> </nav> <div class="row"> <div class="col-sm-5"> <div class="container"> <div class="list-group-item list-group-tem-action active">Item</div> <div class="panel-body bg-dark" style="color: white"> <form id="tbl-project"> <div class="panel-body bg-dark" style="color: white"> <table class="table table-bordered" style="color: white"> <tr> <td> <input type="checkbox" name="pos" value="Suger"> <label>Suger</label> </td> <td> <input type="number" name="qty" id="qty" size="10px"> </td> <td> <select class="form-control" id="option" name="option" placeholder="option" required> <option value="">Please Select</option> <option value="1">GR</option> <option value="2">KG</option> </select> </td> </tr> <tr> <td> <input type="checkbox" name="pos" value="Tea"> <label>Tea</label> </td> <td> <input type="number" name="qty" size="10px"> </td> <td> <select class="form-control" id="option" name="option" placeholder="Plan" required> <option value="">Please Select</option> <option value="1">GR</option> <option value="2">KG</option> </select> </td> </tr> <tr> <td> <input type="checkbox" name="pos" value="Flour"> <label> Flour</label> </td> <td> <input type="number" name="qty" size="10px"> </td> <td> <select class="form-control" id="option" name="option" placeholder="option" required> <option value="">Please Select</option> <option value="1">GR</option> <option value="2">KG</option> </select> </td> </tr> <tr> <td> <input type="checkbox" name="pos" value="Rice"> <label> Rice</label> </td> <td> <input type="number" name="qty" size="10px"> </td> <td> <select class="form-control" id="status" name="status" placeholder="Ricestatus" required> <option value="">Please Select</option> <option value="1">GR</option> <option value="2">KG</option> </select> </td> </tr> <tr> <td> <input type="checkbox" name="pos" value="Dhall"> <label> Dhall</label> </td> <td> <input type="number" name="qty" size="10px"> </td> <td> <select class="form-control" id="Dhallstatus" name="status" placeholder="status" required> <option value="">Please Select</option> <option value="1">GR</option> <option value="2">KG</option> </select> </td> </tr> </table> <input type="button" class="btn btn-info" onclick="Add()" value="Ok" name="Ok" id="Ok"> </div> </form> </div> </div> </div> <div class="col-sm-4"> <div class="container"> <div class="list-group-item list-group-tem-action active">AddProducts</div> <table id="tbl-item" class="table table-dark table-bordered" cellspacing="0" width="100%" align="center"> <thead> <tr> <th>Delete</th> <th>Item</th> <th>Price</th> <th>Qty</th> <th>Total</th> </tr> <tbody> </tbody> </table> </div> </div> <div class="col-sm-2"> <div class="list-group-item list-group-item-action active">Bill</div> <div> <label>Total</label> <input type="text" style="color: yellow; background: black; font-size: 30px;" id="total" name="total" placeholder="Total" required> </div> </br> <div> <input type="button" class="btn btn-warning" value="Reset" name="reset" id="reset"> </div> </div> </div>
当你 select 正确的select用于 GR 或 KG 时，我看到它的错误：
使用$(this).closest("tr").find("select")而不是$("#option") ，（你必须有uniq id并且你有很多 id option ）并且不需要使用循环function
var sel = $(this).closest("tr").find("select")
if (sel.val() == 2) {
var calamount = (
qty * 140);
$("#total").val(calamount);
}
if (sel.val() == 1) {
var calamount = (qty / 1000 * 140);
$("#total").val(calamount);
}
我不知道你是怎么计算的...
php使用下拉列表中的值对SQL Select语句进行排序
[英]php-Ordering an SQL Select statement using value from a drop down list
如何传递a的值 <select>下拉列表以使用javascript在另一个文件中起作用
[英]How to pass the value of a <select> drop-down list to function in another file using javascript
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.