드롭 다운 아약스 채우기

Question

다음과 같은 문제가 있습니다. 드롭 다운에서 요소를 선택하면 아약스를 통해 다른 드롭 다운을 자동으로 채 웁니다. 하위 카테고리 (sub_type)가 "유형"을 선택한 후에로드되지 않는다는 아이디어가 있습니다. isn`t로드

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

그러나 subcathegory는 (선택 secont) :

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

내 아약스 스크립트를 반환합니다.

Answer 1

아약스 성공 기능이 참이라고 가정하면,에 기능 코드 변경 :

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

귀하의 주요 문제를 현재 :

• html 함수는 한 번만 호출됩니다.이 함수는 성공 함수 외부에 있기 때문에 한 번만 호출됩니다.

  은 JSON이 유효 반환 아약스 데이터

• 요소는 키 ID 및 이름하지 optionValue를 및 업데이트

optionDisplay 있습니다. 문자열은 작은 따옴표가 아닌 큰 따옴표로 인용되어야합니다. 따라서 getJSON() 호출이 자동으로 실패합니다.

Answer 2

ajax JSON 호출 바로 다음에 #sub_type에 html을 할당한다는 것은 문제입니다. 당신은이 같은 아약스 콜백 함수에 할당해야합니다

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