Раскрывающийся список ajax

Question

У меня есть следующая проблема: Когда я выбираю элемент из выпадающего меню, я хочу автоматически заполнить другой выпадающий список через ajax. идея заключается в том, что подкатегория (sub_type) не загружается после выбора типа.

HTML
<select id="type" name="type">
<option value="1">General</option>
<option value="2">Test</option>
</select>
<select id="sub_type" name="sub_type">
</select>


SCRIPT
    $("#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);
    });

Мой ajax-скрипт возвращает:

[{id: 0, name: 'Mark'}, {id:1, name: 'Andy'}, {id:2, name: 'Richard'}]

Но подкатегория (секунда выбора) не загружена.

Answer 1

Предполагая, что функция успеха Ajax действительно вызывается, измените код функции на:

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

В настоящее время ваши основные проблемы:

• вызывается функция htmlтолько один раз, потому что это за пределами функции sucess.
• элементы в данных Ajax имеют ключи id и name , а не optionValue и optionDisplay

Обновление:

Возвращенный JSON недействителен.Строка должна быть заключена в двойные кавычки, а не в одинарные.В результате вызов getJSON() завершается неудачно.

Answer 2

Проблема в том, что вы присваиваете html #sub_type сразу после вызова JSON ajax.Вы должны назначить его в функции обратного вызова ajax следующим образом:

$("#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);
  });    
});