寻找动态添加/删除框但隐藏下拉值上的字段
我希望使用 jQuery Ajax 动态地执行添加/删除选择框字段之类的操作，但并非所有文本框都会显示，具体取决于动态下拉值是什么。我在网上找到了很多可以动态添加/删除的脚本，但没有任何基于下拉值的脚本。
在下图中，如果从下拉列表中选择 Bags，则 Item Name 框将隐藏。
<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);
});
喵喵时光机2回答
-
精慕HU
您可以仅禁用下拉列表中选择的某个值的项目名称输入字段。您可以通过为下拉列表中的所选项目添加事件侦听器来实现，并根据值禁用相应的输入字段。 -
子衿沉夜
我建议像这样禁用它：如果选择输入等于“Bags”选择最接近的“项目名称”输入并将其隐藏根据你的代码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_quantity输入：item_unitrestrictsfunction 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">';
随时随地看视频慕课网APP
相关分类
JavaScript