有一个下拉选择框从Mysql数据库填充另一个

时间:2014-11-01 15:49:15

标签: php jquery mysql ajax

我意识到这是一个热门话题,我已阅读了几个例子,但由于某些原因,我无法获取我的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>

通过使用alert我确定下拉选项至少达到了函数,但我的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)

1 个答案:

答案 0 :(得分:0)

我怀疑你可能正在使用数据参数。看看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);
    }
});