php - 让一个下拉选择框从 Mysql 数据库填充另一个下拉选择框

Question

我意识到这是一个流行的主题，我已经阅读了几个示例，但由于某种原因，我无法让我的 AJAX 代码加载第二个 php 页面，该页面将触发第二个下拉菜单的创建。我正在使用一个名为 (page2.php) 的测试页面来尝试调试此页面，而不会妨碍我网站的其余部分。

页面代码如下所示。

<?php   include("db_connect.php"); 

$query = 'SELECT * FROM db_class_catagories';
$result = mysqli_query($dbconnection,$query);
?>

<select id="primary_catagory" name="primary_catagory" onchange = "getData(this)"style="position:absolute;left:10px;top:10px;width:315px;height:20px;z-index:11;text-align:left;">
<option value=''>Select</option>
<?php while ($row = mysqli_fetch_array($result, MYSQL_ASSOC)){
echo "<option value='" . $row['primary_catagory'] . "'>" . $row['primary_catagory'] . "  
</option>";}
?>
</select>

<div id="get_catagory"></div>

<script>
function getData(dropdown) {
    var catagory = dropdown.options[dropdown.selectedIndex].value;
    var dataString = "primary_catagory="+catagory;

$.ajax({
    type: "POST",
    url: "get_sub_catagory.php", // Name of the php files
    data: dataString,
    success: function(html)
    {
        $("#get_catagory").html(html);
    }
});
}
</script>

通过使用警报，我确定下拉选择至少达到了该功能，但我的 AJAX 代码不会将其正确转发到 php 页面。

生成第二个下拉列表的 php 页面称为 get_sub_catagories.php 并包含以下内容。

<?php
include("db_connect.php");
if ($_POST) {
    $primary_catagory = $_POST['primary_catagory'];
    if ($primary_catagory != '') {
       $query = "SELECT * FROM db_class_catagories WHERE primary_catagory=" . $primary_catagory;
       $result1 = mysqli_query($dbconnection,$query);

       echo "<select name='state'>";
       echo "<option value=''>Select</option>"; 
       while ($row = mysql_fetch_array($result1)) {
          echo "<option value='" . $row['sub_catagory'] . "'>" . $row['sub_catagory'] . "    
</option>";}
       echo "</select>";
    }
    else
    {
        echo  '';
    }
}
?>

正在调用该函数，但没有数据传递到 get_sub_catagories.php 页面。我确信我只是在某个地方弄乱了位置，但我对 AJAX 不太熟悉，并使用它作为我的教程。

我认为是这一部分

        success: function(html)
        {
            $("#get_catagory").html(html);

但我不确定出了什么问题。

感谢您的指点!

更新:

我已经在这里解决了问题的第一部分，我从来没有想过要加载我现在已经完成的 JQuery 库

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

现在返回下拉列表对象，但未填充，但查询正在调试中显示(SELECT * FROM db_class_catagories WHERE Primary_catagory=Electronics)

Answer 1

我怀疑这可能是您使用数据参数的方式。看看Pass data from jQuery to PHP for an ajax post .

尝试类似的事情

$.ajax({
    type: "POST",
    url: "get_sub_catagory.php", // Name of the php files
    data: {'primary_catagory': dropdown.options[dropdown.selectedIndex].value},
    success: function(html)
    {
        $("#get_catagory").html(html);
    }
});