Dropdown populate ajax

Question

I have the following issue: When i select an element from a drop down i want to auto populate another drop down via ajax. the idea is that the subcategory(sub_type) doesn\'t

Answer 1

The problem is, that you are assigning the html to #sub_type right after the ajax JSON call. You should assign it in the ajax callback function like this:

$("#type").change(function(){
  $.getJSON("ajax/add_subcathegory.php",{id: $(this).val(), ajax: 'true'}, function(j){
    var options = '';
    for (var i = 0; i < j.length; i++) {
      options += '<option value="' + j[i].id + '">' + j[i].name + '</option>';
    }
    $("#sub_type").html(options);
  });    
});

Answer 2

Assuming that the Ajax success function is indeed called, change the function code to:

          var $subType = $("#sub_type");
          $subType.empty();
          $.each(j, function () {
            $subType.append($('<option></option>').attr("value", this.id).text(this.name));
          });

Your main problems currently are:

• the html function is called only once because it's outside of the sucess function.
• the elements in the Ajax data have the keys id and name and not optionValue and optionDisplay

Update:

The returned JSON is invalid. String have to be quoted with double quotes, not single quotes. As a result, the getJSON() call fails silently.