Как заполнить второе раскрывающееся меню на основе выбора первого раскрывающегося списка с использованием jQuery / AJAX и PHP / MySQL?

Я пытаюсь создать динамический набор выпадающих блоков, используя jQuery / AJAX и PHP / MySQL. Первый раскрывающийся список будет заполнен, когда страница загружается на основе значений из базы данных. Второй раскрывающийся список должен отображать набор значений на основе выбора из первого раскрывающегося списка. Я знаю, что раньше были похожие вопросы, но я не нашел решение, которое соответствует моему сценарию.

Мой запрос на создание JSON-кодированного списка значений для второго раскрывающегося списка работает, но у меня возникают проблемы с его заполнением в фактический элемент формы выпадающего списка. Любые идеи о том, где я ошибаюсь.

• CodeIgniter - неограниченные параметры?
• Как создать sub.domain для пользователя opon зарегистрироваться
• Что такое «:» в PHP?
• Сочетание нескольких таблиц базы данных?
• Добавить параметр POST в fb: кнопка входа

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"}] 

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