需要帮助使用 MySQL 相关的下拉菜单创建添加行功能
Posted
技术标签:
【中文标题】需要帮助使用 MySQL 相关的下拉菜单创建添加行功能【英文标题】：Need help creating add rows function with MySQL dependent dropdowns 【发布时间】：2021-12-21 16:24:42 【问题描述】：Single Hardware Modification
Mulitple Hardware Modifications
我正在尝试使用 mysql、php 和 javascript 设置设备日志。在过去的 3 个月里，我一直在努力自学。我拥有的很多东西来自我在这里或其他论坛上找到的代码。
我有一个专门用于在我们的设备上输入硬件更改的页面。 Subsystem 和 Component 下拉菜单设置为从数据库中提取子系统列表，并根据子系统选择填充组件列表。我还没有深入了解 JavaScript，所以我不完全理解这段代码的一些含义。
我已经把页面设置为输入一个修改，然后提交后，有一个链接可以返回页面添加另一个修改。此选项按预期工作。我的下拉菜单正常工作，并且我的数据按预期输入到我的数据库中。
我正在尝试设置一个页面，以便如果有多个修改，可以将它们添加到一个页面上。我在表单上的所有文本输入字段都按预期工作。我能够为子系统创建第一个下拉列表并用我的表数据填充它，但组件下拉列表不会填充。我一直在关注webslesson.com 的本教程。在其中，他使用了 1 张桌子。我一直在尝试为我正在使用的 2 个表调整它，但我得到了一些功能错误。
谁能指出我可以了解我的代码在哪里偏离轨道的正确方向？我正在努力学习，但目前我不确定如何表达我在寻找的内容。
感谢您查看此内容。请不要对我糟糕的代码太苛刻。我正在努力让它随着我的学习而变得更好。
以上是我的 CodePen.io 和 repl.it 的链接，用于我的页面的 2 个版本。我不得不
这是我的餐桌设置：
lu_subsystem |id|子系统名称| |--|--------------|
lu_component |component_id|subsystem_id|component_name| |------------|------------|--------------|
<?php
//index.php
include('database_connection.php');
?>
<!DOCTYPE html>
<html>
<head>
<title>Add Remove Dynamic Dependent Select Box using Ajax jQuery with PHP</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>
<br />
<div class="container">
<h3 align="center">Add Remove Dynamic Dependent Select Box using Ajax jQuery with PHP</h3>
<br />
<h4 align="center">Enter Item Details</h4>
<br />
<form method="post" id="insert_form">
<div class="table-responsive">
<span id="error"></span>
<table class="table table-bordered" id="item_table">
<thead>
<tr>
<th>Enter Item Name</th>
<th>Subsystem</th>
<th>Component</th>
<th><button type="button" name="add" class="btn btn-success btn-xs add"><span class="glyphicon glyphicon-plus"></span></button></th>
</tr>
</thead>
<tbody></tbody>
</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()
var count = 0;
$(document).on('click', '.add', function()
count++;
var html = '';
html += '<tr>';
html += '<td><input type="text" name="item_name[]" class="form-control item_name" /></td>';
html += '<td><select name="subsystem_id[]" class="form-control subsystem_id" data-subsystem_id="'+count+'"><option value="">Select Subsystem</option><?php echo fill_select_box($connect, "0"); ?></select></td>';
html += '<td><select name="item_component_id[]" class="form-control item_component_id" id="item_component_id'+count+'"><option value="">Select Component</option></select></td>';
html += '<td><button type="button" name="remove" class="btn btn-danger btn-xs remove"><span class="glyphicon glyphicon-minus"></span></button></td>';
$('tbody').append(html);
);
$(document).on('click', '.remove', function()
$(this).closest('tr').remove();
);
$(document).on('change', '.subsystem_id', function()
var id = $(this).val();
var component_id = $(this).data('component_id');
$.ajax(
url:"fill_sub_category.php",
method:"POST",
data:subsystem_id:subsystem_id,
success:function(data)
var html = '<option value="">Select Component</option>';
html += data;
$('#item_component_id'+component_id).html(html);
)
);
$('#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_category').each(function()
var count = 1;
if($(this).val() == '')
error += '<p>Select Item Category at '+count+' row</p>';
return false;
count = count + 1;
);
$('.item_component_id').each(function()
var count = 1;
if($(this).val() == '')
error += '<p>Select Item Sub category '+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>
<?php
//database_connection.php
$connect = new PDO("mysql:host=localhost; dbname=bunker_logs;", "root", "");
function fill_select_box($connect, $id)
$query = "
SELECT * FROM lu_subsystem
";
$statement = $connect->prepare($query);
$statement->execute();
$result = $statement->fetchAll();
$output = '';
foreach($result as $row)
$output .= '<option value="'.$row["id"].'">'.$row["subsystem_name"].'</option>';
return $output;
function fill_component_box($connect, $component_id)
$query = "
SELECT * FROM lu_component
WHERE component_id ='".$id."'
";
$statement = $connect->prepare($query);
$statement->execute();
$result = $statement->fetchAll();
$output = '';
foreach($result as $row)
$output .= '<option value="'.$row["component_id"].'">'.$row["component_name"].'</option>';
return $output;
?>
<?php
//fill_component.php
include('database_connection.php');
echo fill_component_box($connect, $_POST["subsystem_id"]);
?>
【问题讨论】：
有人向我指出其中一个 PHP 文件丢失了。我将多输入链接更新为包含 PHP 文件代码的 repl.it。 我在不同的教程之后尝试了不同的方法。我更新了我的代码和我的 replit。 【参考方案1】：我一直在研究你的代码，老实说，我在 jQuery 方面做得不多。但是，我仍然想给您一个示例，说明如何根据我的经验在您的页面上实施信息：
您可以使用 PHP 直接从数据库中提取信息，而无需使用 JavaScript。如果为此使用 PDO，则会得到一个多维数组。
然后您可以使用 foreach 循环“遍历”数组
$select ='<select id='yourChoice'>';
foreach($array as $component)
$name = component['name'];
$select.="<option value='$name'> $name </option>;
;
$select.='</select>';
在这种情况下，$array 是数据库的完整打印输出，并遍历每一行（$component）
然后它选择列名，并填写它。
如果你想用 JavaScript 做同样的事情，你可以用 JSON 来做，遍历那个数组。 不幸的是，我目前还没有为该示例准备好的示例。
【讨论】：
以上是关于需要帮助使用 MySQL 相关的下拉菜单创建添加行功能的主要内容，如果未能解决你的问题，请参考以下文章
如何向我创建的这个自定义 flexbox 导航栏添加下拉菜单？
如何使用phpmyadmin和mysql从web下拉菜单中修复搜索功能？ [重复]