jQuery, AJAX, PHP 및 MySQL을 사용하여 종속 드롭다운을 채우는 방법은 무엇입니까?

jQuery/AJAX 및 PHP/MySQL을 사용하여 첫 번째 드롭다운 선택을 기반으로 두 번째 드롭다운 채우기

동적 드롭다운 메뉴를 개발하면 사용자가 양식과 상호 작용할 수 있습니다. 더 쉽게. 이 문서에서는 jQuery/AJAX 및 PHP/MySQL을 사용하여 첫 번째 드롭다운에서 선택한 항목을 기반으로 두 번째 드롭다운을 채우는 방법을 보여줍니다.

HTML 코드는 두 개의 드롭다운 목록을 생성하며, 첫 번째 목록은 페이지 로드 시 채워집니다. 두 번째 드롭다운은 첫 번째 드롭다운에서 선택한 항목에 따라 옵션을 표시해야 합니다.

PHP 코드는 데이터베이스를 쿼리하여 두 번째 드롭다운의 값이 포함된 JSON 개체를 생성합니다. 그런 다음 JSON 개체가 jQuery/AJAX 요청에 전달됩니다.

$(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 options corresponding to earlier option of first dropdown
        $('select#item_2').empty();
        $('select#item_2').append('<option value="0">Select Option</option>');
        // Populate options of the second dropdown
        $.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>');
      }
    });

  });
});

JSON 결과의 형식은 다음과 같습니다.

[{"name":"A","id":"0"},{"name":"B","id":"1"},{"name":"C","id":"2"}]

JSON 개체가 수신되고 구문 분석되면 JavaScript에서는 옵션이 두 번째 드롭다운에 동적으로 추가됩니다. 이는 이전 선택 사항을 기반으로 옵션 범위를 좁힐 수 있는 사용자 친화적인 방법을 제공합니다.

위 내용은 jQuery, AJAX, PHP 및 MySQL을 사용하여 종속 드롭다운을 채우는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!