jQuery/AJAXとPHP/MySQLを使用した最初のドロップダウンの選択に基づいて2番目のドロップダウンを設定する方法は？

Question

jQuery/AJAXとPHP/MySQLを使用して、動的なドロップダウンボックスを作成しようとしています。データベースからの値に基づいてページが読み込まれると、最初のドロップダウンボックスが表示されます。 2番目のドロップダウンボックスには、最初のドロップダウンボックスからの選択に基づいて値のセットが表示されます。これまでに似たような質問があったことは分かっていますが、私のシナリオに合った解決策は見つかりませんでした。

2番目のドロップダウンの値のJSONエンコードされたリストを生成するためのクエリが機能していますが、実際のドロップダウンフォーム要素に値を入力する際に​​問題が発生しています。私がどこに間違っているかについてのアイデア。

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出力：

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

Answer 1

まず、文書の準備ができていないかどうかを確認するには、$(document).ready(function(){});か、または$(function(){});にする必要があります。

第2に、JSON結果をループすると少し奇妙に見えます。代わりに次のように試してください：

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