Javascript 从两个相关下拉列表获取表单数据到php

我的页面上有一个表单，其中包括两个相关下拉列表。当用户从第一个列表中选择值时，它填充第二个列表，然后用户从第二个列表中选择值

我想将表单数据提交到php页面以插入mysql中的表中，但当它提交时，除了第二个列表中的值之外，所有数据都被传递。第一个列表和其他输入字段中的值传递正常。 我已经尝试了我所知道的一切，但我不能使这项工作。有什么办法可以实现吗

这是index2.php中的表单（编辑：简化表单元素）：

选择部分


P/N

这是javascript：

$(document).ready(function() {
$("#part_cat").change(function() {
    $(this).after('<div id="loader"><img src="img/loading.gif" alt="loading part number" /></div>');
    $.get('../includes/loadpn.php?part_cat=' + $(this).val(), function(data) {
        $("#pn_cat").html(data);
        $('#loader').slideUp(200, function() {
            $(this).remove();
        });
    });
});
});

$（文档）.ready（函数（）{
$（“#part_cat”）.更改（函数（）{
$（本）。在（''）之后；
$.get（'../includes/loadpn.php？part_cat='+$（this）.val（），函数（数据）{
$（“#pn#cat”）.html（数据）；
$（'#loader'）.slideUp（200，function（）{
$（this.remove（）；
});
});
});
});

这是php加载第二个列表：

<?php 
include('db_connect.php');
// connects to db
$con=mysqli_connect(DB_HOST,DB_USER,DB_PASS,DB_NAME);
$part_cat = $_GET['part_cat'];
$query = mysqli_query($con, "SELECT * FROM pn WHERE pn_categoryID = {$part_cat}");
while($row = mysqli_fetch_array($query)) {
echo "<option value='$row[part_id]'>$row[pn_name]</option>";
}
?>

---

你能试着把
$\u GET
换成

$pn_typeID = mysqli_real_escape_string($con, $_GET['pn_cat']);

使用
$\u POST

$pn_typeID = mysqli_real_escape_string($con, $_POST['pn_cat']);


编辑：基于提问者的反馈和解决方案的想法

注意：此编辑基于您的建议，尽管我测试了您的原始代码并获得了令人满意的结果（在我从代码中删除PHP和MySQL并用合适的替代品替换它们之后）

解决方案

以下是隐藏字段的HTML：

<input type="hidden" id="test" name="test" value="" placeholder="test" />

您可以在原始代码的
函数（数据）{
中调用上述函数，如下所示：

setHiddenTextFieldValue('#pn_cat', '#test'); // note the hashes (#)

我还建议您在
循环开始之前，将以下HTML硬编码到HTML和PHP文件中：

<option value="" disabled selected="selected">Select</option>

选择

上面这一行可以改善用户体验，这取决于您希望代码的工作方式。但是请注意，这完全是可选的。
解决了它！这只是一个愚蠢的打字错误，真不敢相信我为此浪费了2天！
在loadpn.php中，而不是：
$row[零件id]
应改为：
$row[pn_id]
出于某种原因，下拉菜单起作用，但未设置pn_cat的偏离路线值

这也适用于设置2个字段值（现在我不需要，但如果有人想知道）：

$（文档）.ready（函数（）{
$（“#part_cat”）.更改（函数（）{
$（'#pn_hidden'）.val（$（this.val（））；
});
$（“#pn#cat”）.更改（函数（）{
$（'#pn_hidden2'）.val（$（this.val（））；
});
})；

还将js更改为post:

$（文档）.ready（函数（）{
$（“#part_cat”）.更改（函数（）{
$.post（'../includes/loadpn.php'，part_cat='+$（this.val（），函数（数据）{
$（“#pn#cat”）.html（数据）；
});
}); 
})；

感谢您的支持：

选择

它确实有助于用户体验。
我们可以看到接收表单提交的php代码和实际上没有获取值的php代码吗？insertpart.php您可以将生成的html代码从表单的开头发布到结尾吗？您是否检查了生成的
$\u post
全局？@FélixGagnon Grenier您指的是所有内容ndex2.php？我不知道如何检查$\u POST global？尝试过，但不起作用。基本上我认为pn\u cat不会被发送，因为pn\u cat在第一个列表填充之前不存在。在页面源代码中，即使在选择之后它也是空的。是否有一些jquery/javascript函数（类似于onchange的功能）这可以把我的选择转移到可能隐藏的输入字段？这是我能想到的最好的解决方法，我尝试过类似于上面的javascript，但没有得到任何结果。我尝试过，但没有成功。我做错什么了吗？这就是我所做的：
$（document）.ready（function（）{function setPNcat（'pn#u cat'，'pn u hidden'）{$（'pn u cat'））.change（function（）{$（'.#pn_hidden'）.val（$（this.val（））；}）$（'.#part_cat'）.change（setPNcat）；
我也为part_cat做了这件事，看看它是否有效，但都无效。这对part_cat有效，但对pn_cat:
$（document.ready.ready（function（）{$（“#part#cat”）。change（function（）{$（'.#pnu hidden'）.val（））.get$）（'../includes/loadpn.php？part_cat='+$（this.val（），函数（data）{$（“#pn_cat”）.html（data）；}}）；
function setHiddenTextFieldValue(initiator, target){
    $(initiator).change(function() {
        $(target).val($(this).val());
    });
}

setHiddenTextFieldValue('#pn_cat', '#test'); // note the hashes (#)

<option value="" disabled selected="selected">Select</option>