jQuery/AJAX 및 PHP/MySQL을 사용하여 첫 번째 드롭 다운 선택에 따라 두 번째 드롭 다운을 채우는 방법은 무엇입니까?

Question

jQuery/AJAX와 PHP/MySQL을 사용하여 동적 인 드롭 다운 상자 세트를 만들려고합니다. 첫 번째 드롭 다운 상자는 데이터베이스의 값을 기반으로 페이지가로드 될 때 채워집니다. 두 번째 드롭 다운 상자에는 첫 번째 드롭 다운 상자의 선택에 따라 값 집합이 표시되어야합니다. 이전에 비슷한 질문이 있었지만 내 시나리오와 일치하는 해결책을 찾지 못했습니다.

두 번째 드롭 다운에 대한 값의 JSON 인코딩 된 목록을 생성하는 내 쿼리가 작동하지만 실제 드롭 다운 폼 요소로 채우는 데 문제가 있습니다. 내가 어디로 잘못 가고 있는지에 대한 아이디어.

자바 스크립트 :

<script> 
$().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 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(){  
        $('select#item_2').append('<option value="'+$(this).attr('group_id')+'">'+$(this).attr('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>'); 
      } 
     }) 

    }); 
}); 

</script> 

HTML :

<label id="item_1_label" for="item_1" class="label">#1:</label> 
<select id="item_1" name="item_1" /> 
    <option value="">Select</option> 
    <?php 
     $sth = $dbh->query ("SELECT id, name, level 
          FROM groups 
          WHERE level = '1' 
          GROUP by name 
          ORDER BY name");         
     while ($row = $sth->fetch()) { 
      echo '<option value="'.$row['id'].'">'.$row['name'].'</option>'."\n";  
     } 
    ?> 
</select> 

<label id="item_2_label" for="item_2" class="label">#2:</label> 
<select id="item_2" name="item_2" />       
</select> 

PHP :

<?php 

require_once('../includes/connect.php');   

$item_1_id = $_GET['item_1_id']; 

$dbh = get_org_dbh($org_id); 

$return_arr = array(); 

$sth = $dbh->query ("SELECT id, name, level 
        FROM groups 
        WHERE level = '2' 
        AND parent = $item_1_id 
        GROUP by name 
        ORDER BY name"); 

while ($row = $sth->fetch()) { 

    $row_array = array("name" => $row['name'], 
         "id" => $row['id']); 

    array_push($return_arr,$row_array);  
} 

echo json_encode($return_arr); 

?> 

샘플 JSON 출력 :

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

Answer 1

첫 번째로, 문서 준비가 약간 어둡게 보입니다. $(document).ready(function(){});이거나 단지 $(function(){}); 일 수 있습니다.

두 번째로 JSON 결과를 반복하면 조금 이상하게 보입니다. 대신 다음과 같이 시도하십시오.

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