javascript - 如何根据另一个动态下拉列表和文本框为动态文本框提供默认值?
问题描述
我正在寻找执行以下操作。尝试使 Quantity 列文本框具有基于同一动态表中的下拉列表和文本框的默认值。
因此,在下图中,当 Unit 下拉菜单设置为 2,然后在第 2 行输入 Quantity 为 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");
}
}
$(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><?php echo numopt(); ?>';
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();
});
$('#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>');
}
});
});
</script>
解决方案
[更新] 提供两种方式的更新。我希望它像您预期的结果一样工作(但仍然像我在评论中建议的那样,建议考虑另一种使用不依赖于“设计”的技术来管理它的方法。像 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:对不起,我很忙 :) 一个建议:如果可能的话,你可以在单元格表上添加一些类,这样你就可以使用最接近的()来优化你的代码。
推荐阅读
- timestamp - 更改 MariaDB 表行中时间戳值的正确方法是什么
- python - 区域明智的 SKU 贡献
- php - array_search 与第一个键不匹配
- c# - 如何获取 api 控制器中所有操作的完整 url
- mysql - 为什么在 MySQL 上删除表的某些行后我的可用磁盘空间减少了?
- qt - QML 切换窗口标志
- asp.net-core - 从 Razor 填充 Knockout 的可观察数组
- c# - 带有 Azure Active Directory 的 Web 应用程序始终重定向到“~/.auth/login/done”URL
- mysql - 如何为Django(MySQL后端)中的每个表设置不同的存储引擎?
- r - 每组子集特定行