如何根据另一个动态下拉列表和文本框为动态文本框指定默认值？
我正在寻求执行以下操作。尝试让数量列文本框具有基于同一动态表中的下拉列表和文本框的默认值。
因此，在下图中，当单位下拉列表设置为 2，然后在第 2 行中输入数量为 5 时，下面的任何行都将具有第 2 行的默认数量。因此第 6 行和第 7 行的默认值为 5。
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<form method="post" id="insert_form">
<div class="table-repsonsive">
<span id="error"></span>
<table class="table table-bordered" id="item_table">
<tr>
<th>Unit</th>
<th>Name</th>
<th>Quantity</th>
<th><button type="button" name="add" class="btn btn-success btn-sm add"><span class="glyphicon glyphicon-plus"></span></button></th>
</tr>
</table>
<div align="center">
<input type="submit" name="submit" class="btn btn-info" value="Insert" />
</div>
</div>
</form>
</div>
</body>
</html>
<script>
let restricts = ["bags", "kg"];
function hideQuantity(e) {
if (restricts.indexOf(e.target.value) > -1) {
e.target.closest("tr").querySelector(".item_quantity").setAttribute("disabled", "disabled");
} else {
e.target.closest("tr").querySelector(".item_quantity").removeAttribute("disabled", "disabled");
}
}
墨色风雨浏览 105回答 1
1回答
-
陪伴而非守候
提供两种方式的更新。我希望它能像您预期的结果一样工作（但仍然像我在评论中建议的那样，建议考虑使用不“设计相关”的技术来管理此问题的另一种方法。例如 Javascript 对象或 LocalStorage...）let restricts = ["bags", "kg"];function hideQuantity(e) { if (restricts.indexOf(e.target.value) > -1) { e.target.closest("tr").querySelector(".item_quantity").setAttribute("disabled", "disabled"); } else { e.target.closest("tr").querySelector(".item_quantity").removeAttribute("disabled", "disabled"); }}$(document).ready(function(){ $(document).on('click', '.add', function () { var html = ''; html += '<tr>'; html += '<td><select onclick="hideQuantity(event)" name="item_unit[]" id="item_unit" class="form-control item_unit">'; html += '<option value="">Select Unit</option><option value="bags">Bags</option><option value="inch">Inch</option><option value="kg">Kg</option><option value="2">2</option><option value="3">3</option><option value="4">4</option>'; html += '</select></td>'; html += '<td><input type="text" name="item_name[]"" class="form-control item_name" /></td>'; html += '<td><input type="text" name="item_quantity[]"" class="form-control item_quantity" /></td>'; html += '<td><button type="button" name="remove" class="btn btn-danger btn-sm remove"><span class="glyphicon glyphicon-minus"></span></button></td></tr>'; $('#item_table').append(html); }); $(document).on('click', '.remove', function(){ $(this).closest('tr').remove(); }); $(document).on('change keyup focusout','.item_quantity',function(){ //I called it in french to avoid confusion with value val... var valeur =$(this).val(); var unitreference= $(this).parents("tr").find("td:first select.item_unit").val(); $('.item_unit').each(function(){ if($(this).val()==unitreference ){ $(this).parents("tr").find("td:eq(2) input.item_quantity").val(valeur).attr('disabled', 'disabled'); } }); $(this).removeAttr("disabled"); }) $(document).on('change','.item_unit',function(){ //Update using the unit selector var selectedUnit =$(this).val(); //Here we look for the Quantity field being used as Referece var quantRef= $('select option[value='+selectedUnit+']:selected').parents("tr").find("td:eq(2) input.item_quantity:not(:disabled)").val() //console.log(selectedUnit) //console.log(quantRef) if(quantRef){ $('.item_unit').each(function(){ if($(this).val()==selectedUnit ){ $(this).parents("tr").find("td:eq(2) input.item_quantity").val(quantRef).attr('disabled', 'disabled'); } }); } }) $('#insert_form').on('submit', function(event){ event.preventDefault(); var error = ''; $('.item_name').each(function(){ var count = 1; if($(this).val() == '') { error += "<p>Enter Item Name at "+count+" Row</p>"; return false; } count = count + 1; }); $('.item_quantity').each(function(){ var count = 1; if($(this).val() == '') { error += "<p>Enter Item Quantity at "+count+" Row</p>"; return false; } count = count + 1; }); $('.item_unit').each(function(){ var count = 1; if($(this).val() == '') { error += "<p>Select Unit at "+count+" Row</p>"; return false; } count = count + 1; }); var form_data = $(this).serialize(); if(error == '') { $.ajax({ url:"insert.php", method:"POST", data:form_data, success:function(data) { if(data == 'ok') { $('#item_table').find("tr:gt(0)").remove(); $('#error').html('<div class="alert alert-success">Item Details Saved</div>'); } } }); } else { $('#error').html('<div class="alert alert-danger">'+error+'</div>'); } });});<html> <head> <title></title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <form method="post" id="insert_form"> <div class="table-repsonsive"> <span id="error"></span> <table class="table table-bordered" id="item_table"> <tr> <th>Unit</th> <th>Name</th> <th>Quantity</th> <th><button type="button" name="add" class="btn btn-success btn-sm add"><span class="glyphicon glyphicon-plus"></span></button></th> </tr> </table> <div align="center"> <input type="submit" name="submit" class="btn btn-info" value="Insert" /> </div> </div> </form> </div></body></html>PS：抱歉我很忙:) 一个建议：如果可能的话，您可以在单元格表上添加一些类，以便您可以使用closest() 优化您的代码。
随时随地看视频慕课网APP
相关分类
JavaScript