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 중국어 웹사이트의 기타 관련 기사를 참조하세요!