我希望使用 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 回答
子衿沉夜
TA贡献1828条经验 获得超3个赞
我建议像这样禁用它：
如果选择输入等于“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_unitrestricts
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">';
添加回答
举报
0/150
提交
取消