如何使用 jQuery 和 AJAX 创建动态级联下拉框？

动态级联下拉框

此示例演示了动态下拉框的创建，该动态下拉框基于以下内容填充第二个下拉框选择第一个下拉框，如必填。

说明：

1. 第一个下拉框：

   • 包含供用户选择的选项。
   • 当用户选择时

2. jQuery/AJAX:

   • change 事件触发 AJAX 请求到一个单独的 PHP 文件（例如 update.php）。
   • 从中选择的值第一个下拉框随请求一起发送。

3. update.php:

   • 接收所选内容第一个下拉框中的值。
   • 执行查询以检索第二个下拉列表的相关选项
   • 将数据格式化为 JSON 格式并返回给 AJAX 调用。

4. AJAX 成功函数：

   • 接收 JSON 响应并使用相关内容填充第二个下拉框选项。

示例代码：

tester.php:

<select name="gender">

upda te.php:

if (!empty($_GET['id']) && !empty($_GET['value'])) {
    $id = $_GET['id'];
    $value = $_GET['value'];

    $sql = "SELECT * FROM `category` WHERE `master` = ?";
    $statement = $objDb->prepare($sql);
    $statement->execute(array($value));
    $list = $statement->fetchAll(PDO::FETCH_ASSOC);

    if (!empty($list)) {
        $out = array('<option value="">Select one</option>');

        foreach ($list as $row) {
            $out[] = '<option value="' . $row['id'] . '">' . $row['name'] . '</option>';
        }

        echo json_encode(array('error' => false, 'list' => implode('', $out)));
    } else {
        echo json_encode(array('error' => true));
    }
} else {
    echo json_encode(array('error' => true));
}

机制：

1. 何时用户从第一个下拉框中选择一个选项，其值将被捕获。
2. 向 update.php 发出 AJAX 请求，并携带所选值。
3. update.php 检索为第二个下拉框选择合适的选项，并以 JSON 格式返回。
4. AJAX 成功函数更新第二个下拉框中选定的选项，使其成为动态。

通过执行以下步骤，您可以创建级联下拉框，为数据选择提供用户友好且响应灵敏的界面。

以上是如何使用 jQuery 和 AJAX 创建动态级联下拉框？的详细内容。更多信息请关注PHP中文网其他相关文章！