如何使用 jQuery、AJAX、PHP 和 MySQL 创建动态相关下拉菜单？

使用 jQuery/AJAX 和 PHP/MySQL 的动态下拉列表

问题：

构造一个使用 jQuery/AJAX 和 PHP/MySQL 的一组动态下拉框，其中第二个下拉列表的选项取决于第一个下拉列表中的选择。

JSON 查询：

提供的用于生成第二个下拉列表值的 JSON 查询可以正常运行。但是，将选项填充到下拉表单元素中时存在问题。

Javascript：

主要错误位于第一个下拉列表的事件处理程序中。修改后的代码应类似于：

$().ready(function () {
    $("#item_1").change(function () {
        var group_id = $(this).val();

        $.ajax({
            type: "POST",
            url: "../../db/groups.php?item_1_id=" + group_id,
            dataType: "json",
            success: function (data) {
                // Clear previous options
                $('select#item_2').empty();
                $('select#item_2').append('<option value="0">Select Option</option>');

                // Populate options from JSON
                $.each(data.subjects, function (i, val) {
                    $('select#item_2').append('<option value="' + val.id + '">' + val.name + '</option>');
                });

                $('select#item_2').focus();
            },
            beforeSend: function () {
                $('select#item_2').empty();
                $('select#item_2').append('<option value="0">Loading...</option>');
            },
            error: function () {
                $('select#item_2').attr('disabled', true);
                $('select#item_2').empty();
                $('select#item_2').append('<option value="0">No Options</option>');
            }
        });
    });
});

HTML:

提供的 HTML 代码显示正确。

PHP:

用于检索 JSON 数据的 PHP 代码也是正确的。

示例 JSON 输出：

提供的示例 JSON 输出是有效的，将是由 jQuery 代码正确解析。

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