📌  相关文章
📜  创建一个下拉列表，其中包含从PHP的 MySQL 数据库获取的选项(1)

📅  最后修改于: 2023-12-03 15:22:40.320000             🧑  作者: Mango

创建下拉列表并从MySQL数据库获取选项

当我们需要在我们的应用程序中提供下拉列表时，我们通常将手动编写选项并将其硬编码到HTML文件中。然而，在从数据库中检索选项时，我们可以使用PHP和MySQL使其更动态。在这里，我们将介绍如何创建一个下拉列表，并从MySQL数据库获取选项。

准备工作

在开始编写PHP代码之前，我们需要完成以下准备工作：

  1. 创建一个MySQL数据库，并在其中创建一个表。使表包含所需的选项。

  2. 创建一个PHP文件来处理MySQL查询和生成下拉列表。我们将命名这个文件为 options.php。

  3. 在你的HTML文件中，引用jQuery。这使我们在下面的代码中可以使用jQuery库。

创建PHP文件

首先，我们将连接到MySQL数据库，执行查询并将结果存储在一个数组中。我们将创建一个 options.php 文件来完成此任务。

以下是我们将要使用的代码：

// 连接到MySQL数据库
$conn = new mysqli("localhost", "username", "password", "dbname");

// 确认连接正常
if ($conn->connect_error) {
    die("连接失败: " . $conn->connect_error);
}

// 执行查询
$sql = "SELECT option_id, option_name FROM my_options_table";
$result = $conn->query($sql);

// 存储结果到数组中
$options = array();
while ($row = $result->fetch_assoc()) {
    $options[] = $row;
}

// 返回JSON格式的选项数组
echo json_encode($options);

以上代码中，我们使用MySQLi连接到MySQL数据库。我们确定连接没有问题，然后执行SQL查询并将结果存储在一个数组中。最后，我们使用 json_encode 将数组格式化为JSON，并将其发送回调用我们的 options.php 文件的页面。

在HTML中创建下拉列表

现在我们已经获得了我们需要将作为下拉列表选项的数据，我们将使用jQuery为其创建元素。

我们首先需要在HTML文件中创建一个select元素，以及一个空的option元素，用作下拉列表的默认值。以下是我们的HTML代码：

<select id="my_select">
    <option value="">--请选择--</option>
</select>

接下来，我们将使用jQuery从我们的 options.php 文件中检索选项。

以下是我们将使用的代码：

// 检索选项并将其添加到下拉列表中
$.getJSON( "options.php", function( data ) {
    $.each( data, function( key, val ) {
        $('#my_select').append('<option value="' + val.option_id + '">' + val.option_name + '</option>');
    });
});

在以上代码中，我们使用 $.getJSON 函数从 options.php 中获取数据，并将数据格式化为JSONArray 对象。然后，我们使用 $.each 迭代数组并将每个选项添加为 option 元素到我们的 select 元素中。

完整的HTML文件

以下是整个HTML文件的代码片段，其中包含所有上述步骤：

<!doctype html>
<html>
<head>
    <title>PHP MySQL 下拉列表</title>
</head>
<body>
    <select id="my_select">
        <option value="">--请选择--</option>
    </select>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $.getJSON( "options.php", function( data ) {
            $.each( data, function( key, val ) {
                $('#my_select').append('<option value="' + val.option_id + '">' + val.option_name + '</option>');
            });
        });
    </script>
</body>
</html>
总结

在本文中，我们介绍了如何使用PHP和MySQL从数据库中检索数据，并将数据添加为下拉列表选项。我们还包括了恰当的HTML和jQuery代码，以确保我们的下拉列表在网页中正确运行。

我们希望这篇文章对您有所帮助，并提供了在您的项目中实现下拉列表的方法。