¿Cómo llenar el segundo menú desplegable según la selección del primer menú desplegable usando jQuery/AJAX y PHP/MySQL?

Question

Estoy tratando de crear un conjunto dinámico de cuadros desplegables, usando jQuery/AJAX y PHP/MySQL. El primer cuadro desplegable se completará cuando la página se cargue en función de los valores de una base de datos. El segundo cuadro desplegable debe mostrar un conjunto de valores basados ​​en la selección del primer cuadro desplegable. Sé que se han hecho preguntas similares aquí antes, pero no he encontrado una solución que coincida con mi escenario.

Mi consulta para generar una lista de valores codificados JSON para el segundo menú desplegable está funcionando, pero tengo problemas para completarla en el elemento de formulario desplegable. Alguna idea sobre dónde me estoy equivocando.

Javascript:

<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 Ejemplo de salida:

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

Answer 1

En primer lugar, su documento listo parece un poco apagado, debe ser $(document).ready(function(){}); o podría ser simplemente $(function(){});.

En segundo lugar, el bucle sobre el resultado de JSON parece un poco extraño también. Pruebe algo como esto en su lugar:

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