div를 웹 페이지에 추가 - 아약스로 데이터 게시

Question

사용자가 드롭 다운 필드에서 상태를 선택한 다음 아약스는 해당 값을 데이터베이스에 게시하여 해당 상태에있는 고등학교 목록을 검색합니다.

또한 이름과 이메일 주소를 묻는 다른 입력란이 있습니다. 사용자가 주를 선택하면 해당 고등학교를 검색하고 해당 고등학교와 함께 새 드롭 다운을 표시하며 여기에서 문제가있는 곳에 이름 및 이메일과 같은 다른 입력란이 중복됩니다.

HTML

<form> 
<div id="inquiry-form"> 
    name: 
    email: 
    state drop-down field 
</div> 

<div id="high-schools"> 
    high school drop-down field 
</div> 

submit button 
</form> 

JS

$(document).ready(function() { 

    $('#state').bind('change', function() { 
    var form_data = { 
     state : $('#state').val(), 
     ajax : '1' 
    }; 

    $.ajax({ 
     url: '/recruiter-card/index.php/inquiry/index', 
     type: "POST", 
     data: form_data, 
     success: function(msg) { 
     $("#high-schools").html(msg); 
     } 
    }); 
    return false; 
    }); 

}); 

나는 이것에 대한 jsfiddle이없는, 여기가 상태를 선택한 후, 모든 필드를 복제하는 일의 스크린 샷이다.

복제하지 않고, 고등학교 드롭 다운을 표시하고 그대로 다른 모든 필드를 유지하는 가장 좋은 방법은 무엇입니까?

Answer 1

아약스 반환에는 select 이상이 포함되어 있습니다. 다음을 시도하십시오.

... 
    success: function(msg) { 
    $("#high-schools").html($(msg).find('#high-schools').html()); 
    } 
}); 
... 

this example을 참조하십시오.

Answer 2

이 문제를 해결할 수있는 몇 가지 방법이 있습니다. 먼저, 데이터를 보내지 않은 양식의 부분 만 반환하도록 백엔드 코드를 간단히 변경할 수 있습니다. 그래서 당신이 상태를 보내면 상태 후에 필드를 반환하십시오. 또한이 매개 변수를 ajax=1과 같은 추가 매개 변수에 종속시킬 수 있으므로이 백엔드 스크립트를 여러 가지 방법으로 사용할 수 있습니다. 옵션 태그 내부에

$(document).ready(function() { 

    $('#state').bind('change', function() { 
    var form_data = { 
     state : $('#state').val(), 
     ajax : '1' 
    }; 

    $.ajax({ 
     url: '/recruiter-card/index.php/inquiry/index', 
     type: "POST", 
     data: form_data, 
     success: function(msg) { 
     $("#high-schools").html($(msg).filter("#high-schools").html()); 
     } 
    }); 
    return false; 
    }); 

});