动态下拉菜单在 div 中显示动态内容

Posted 2023-02-24

【中文标题】动态下拉菜单在 div 中显示动态内容

【英文标题】：Dynamic Dropdown Displays Dynamic Content In a Div

【发布时间】：2014-09-12 13:38:21

【问题描述】：

我有一个存储在 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 下拉列表是通过数据库生成的，因此当前没有任何项目具有值，这是我找到的最简单的解决方案，当您希望下拉选择显示内容时一个分区。使用 AJAX 似乎是另一种可能的解决方案，但我什至不确定如何将它用于库存列表。

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

编辑：

所以我决定使用 AJAX 方法。我设置了一个单独的 PHP 文件，它只是从数据库中返回库存中的数字，现在我正在尝试使用它来提取主页所需的库存数字。有人告诉我，我需要使用更改事件来触发每个新值，并使用 AJAX 请求，但我不知道该怎么做，希望任何人都可以提供帮助！

【参考方案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);
    );
);

);