寻找动态添加/删除框，但在下拉值上隐藏字段
Posted
技术标签:
【中文标题】寻找动态添加/删除框，但在下拉值上隐藏字段【英文标题】：Looking for dynamically add/remove box but hide field on dropdown value 【发布时间】：2021-02-20 09:13:23 【问题描述】：我希望使用 jQuery Ajax 动态地添加/删除选择框字段，但并非所有文本框都会根据动态下拉值显示。我在网上找到了很多可以动态添加/删除的脚本，但没有任何基于下拉值的脚本。
在下图中，如果从下拉列表中选择包，则项目名称框将隐藏。
<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>
$(document).ready(function()
$(document).on('click', '.add', function()
var html = '';
html += '<tr>';
html += '<td><select name="item_unit[]" class="form-control item_unit">';
html += '<option value="">Select Unit</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>
【问题讨论】：
【参考方案1】：您可以为下拉列表中选择的某个值禁用项目名称的输入字段。您可以通过在下拉列表中为选定项目添加事件侦听器并根据值禁用相应的输入字段来做到这一点。
【讨论】：
【参考方案2】：我建议这样禁用它：
如果 select 输入等于“包” 选择最近的“项目名称”输入并将其隐藏根据您的代码
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[]" 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);
);
...
更多解释：
首先，我添加了一些静态数据进行测试：
html += '<option value="">Select Unit</option><option value="bags">Bags</option><option value="inch">Inch</option><option value="kg">Kg</option><?php echo numopt(); ?>';
其次，创建一个restricts 数组。这个数组保存item_unit 的值，你想在其中隐藏item_quantity 输入：
let restricts = ["bags", "kg"]; // add as many as you want
第三，我创建了hideQuantity函数，这个函数的目的是在item_unit选择输入值匹配restricts数组的任何其他值时隐藏item_quantity输入：
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");
最后，将hideQuantity 函数添加到每个item_unit 选择输入：
html += '<td><select onclick="hideQuantity(event)" name="item_unit[]" class="form-control item_unit">';
【讨论】：
不确定这是否可行。在点击添加按钮之前，unitInput 不会显示。也应该是 getElementById 而不是 getElementbyId 对吧？ 没错，它是getElementById，而不是getElementbyId。这应该适用于add button，只需为您的unitInput 选择输入设置一个默认值，例如请选择您的测量系统，然后将我的功能应用于它。如果您仍然对此感到困扰，可以与我分享您的文件，我很乐意提供帮助。
添加了我正在使用的内容。如果 Select Unit 为 3，则尝试隐藏 Quantity。Select Unit 有选项 1-5。
非常感谢。正是我想要做的。
这有一个问题。因为数据正在发送到数据库，所以禁用的字段会将混合的数据发送到数据库。以上是关于寻找动态添加/删除框，但在下拉值上隐藏字段的主要内容，如果未能解决你的问题，请参考以下文章
ExtJS 下拉框监听事件日期选择器监听事件实现动态给items添加删除数据