我希望使用 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);});
尋找動態添加/刪除框但隱藏下拉值上的字段
喵喵時光機
2023-07-20 10:23:13
