Dropdown poblar ajax

Tengo el siguiente problema: cuando selecciono un elemento de un menú desplegable, quiero completar automáticamente otro menú desplegable a través de ajax. la idea es que la subcategoría (sub_type) no se cargue después de seleccionar el "tipo".

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);
    });

Mi script ajax regresa:

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

Pero la subcategoría (selección secundaria) no está cargada.

Respuestas a la pregunta(2)

Su respuesta a la pregunta