How to populate a second dropdown menu based on the selection of the first dropdown using jQuery / AJAX and PHP / MySQL?

Question

I am trying to create a dynamic set of dropdowns using jQuery / AJAX and PHP / MySQL. The first drop-down list will be populated when the page is loaded based on values ​​from the database. The second drop-down list should display a set of values ​​based on the selection from the first drop-down list. I know that there were similar questions before, but I did not find a solution that fits my scenario.

My request to create an encoded list of JSON values ​​for the second drop-down list works, but I am having problems filling it into the actual form element of the drop-down list. Any ideas on where I am going wrong.

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 output example:

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

Answer 1

Firstly, your finished document looks a bit, it should be $(document).ready(function(){}); , or it could just be $(function(){}); .

Secondly, you are fixated on the JSON result, also look a little strange. Try something like this:

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