Edit Question - KnowledgeHub

Title Body

I am trying to create a dynamic set of dropdown boxes, using jQuery/AJAX and PHP/MySQL. The first dropdown box will be populated when the page loads based on values from a database. The second dropdown box should display a set of values based on the selection from the first dropdown box. I know there have been similar questions asked on here before, but I haven't found a solution that matches my scenario. My query to generate a JSON encoded list of values for the second drop down is functioning, but I am having issues populating it into the actual dropdown form element. Any ideas on where I'm 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>

Tags (comma-separated) Cancel