动态下拉列表显示Div中的动态内容

时间:2014-07-21 21:49:50

标签: php mysql ajax drop-down-menu dynamic-data

我有一个存储在MySQL数据库中的库存清单。我有一个表单,用于输入用户输入以更新库存更改,所有这些表都包含一个带有项目名称列的表格,其中包含一个包含项目的下拉列表,以及一个(当前)空白# In Stock列。

以下是我的表格代码:

<table id="updateStockTable">
        <thead>
            <tr>
                <th>Item Name</th>
                <th># In Stock</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    <select required>
                        <option></option>
                        <?php
                        $query = mysqli_query($db, "SELECT itemName FROM SOISInventoryList ORDER BY itemName");

                        if(!$query){
                            echo "Could not grab query.";
                        }

                        else{
                            while($row = mysqli_fetch_assoc($query)){
                                echo "<option>" . $row['itemName'] . "</option>";
                            }                                
                        }
                        ?>
                    </select>
                </td>
                <td>
                    -
                </td>
            </tr>
        </tbody>
    </table>

项目名称下拉列表是通过数据库生成的。我希望,只要用户从下拉列表中选择一个项目,该商品的库存编号就会显示在# In Stock column的div中。

我的问题是:Item Name下拉列表是通过数据库生成的,因此当前没有任何项目具有值,这是我想要下拉列表选择时找到的最简单的解决方案在div中调出内容。使用AJAX似乎是另一种可能的解决方案,但我甚至不确定如何将其用于库存清单。

我不确定这些想法中的任何一个是否是正确或最佳解决方案,如果是,我将如何使用其中任何一个。

编辑:

所以我决定采用AJAX方法。我有一个单独的PHP文件设置,它只是从数据库中返回库存中的数字,现在我试图使用它来提取主页所需的库存数量。我被告知我需要使用更改事件来触发每个新值,并使用AJAX请求,但我不知道如何执行此操作并感谢任何人提供的任何帮助!

1 个答案:

答案 0 :(得分:1)

所以这就是我提出的解决方案:

我设置了一个单独的php文件,其中包含一个查询,该查询抓取当前选定的下拉项并从MySQL数据库中检索库存值中的相应数字:

$receivedString = null;

if ($_GET["item"] != ""){
    $receivedString = $_GET["item"];
}

if($receivedString != null){
    //Check connection
    $db = mysqli_connect(DB_HOST, DB_USER, DB_PASSWORD, DB_NAME) OR die ('Could not connect to SOIS MySQL server with error: ' . mysqli_connect_error());

    $query = mysqli_query($db, "SELECT numInStock FROM SOISInventoryList WHERE id =  $receivedString");

    if (!$query){
        echo "Could not find query.";
    }

    while($row = mysqli_fetch_assoc($query)){
        echo $row['numInStock'];
    }
}

然后使用jQuery的.change()函数,所以当下拉列表中的项目发生变化时,我可以调用单独的php文件。

$(function(){
$('#itemNameDropDown').change(function(){
    var SelectedItem = $(this).val();
    //Sending the selected item value to the php file as JSON
    //Assuming that the php file is setup to consume $_GET variables
    $.get('grab-num-in-stock.php', {"item": SelectedItem})
    .done(function(returnedData){
    //Assuming just a string is returned right now
        $('.numInStockCol').text(returnedData);
    });
});

});