페이지로드 및 변경시 AJAX를 사용하여 SELECT 요소 채우기

Question

SELECT 요소가 선택 옵션이 변경 될 때 AJAX를 사용하여 채우는 양식에 있습니다. 이것은 다음 코드를 사용하여 실제로 잘 작동합니다.

$(function() { 
    function populate() { 
    $.getJSON('/action/' + $(this).val(), {}, function(data, textStatus) { 
     var el = $('select#two'); 
     el.html(''); // empty the select 
     $.each(data, function(idx, jsonData) { 
     el.append($('<option></option>').val(jsonData.id).html(jsonData.name)); 
     }); 
    }); 
    } 

    $("select#one").change(populate); 
}); 

물론 첫 번째 드롭 다운이 처음 변경 될 때만 작동합니다. 내가 무엇을하고 싶습니다 동일한 메서드를 사용하여 페이지를 처음로드 할 때 두 번째 드롭 다운 pre-populate 것입니다. 내가 생각할 수있는

있는 유일한 방법은 다음과 같이 getJSON 전화를 수정하는 것입니다 :

는

$.getJSON('/action/' + $("select#one").val(), {}, function(data, textStatus) 

다음

단순히 하단에이 호출 (즉 $(this)를 사용하지 않는)가 ' 로드시 초기화 블록 :

populate(); 

이 작업은 효과가 있지만 그렇지 않습니다. 누구든지 더 나은 해결책을 제안 할 수 있습니까?

Answer 1

당신과 같이 당신의 선택에 .trigger('change')을 추가하여 변경 이벤트를 트리거 할 수 있습니다 제 생각에는

$("select#one").change(populate).trigger('change'); 

Answer 2

를가 먼저 서버 측 코드를 사용하여 선택 채우는 것이 좋습니다. Ajax 호출을 사용하면 페이지가 나타나지만 선택 상자가 비어있는 간격이 생길 수 있습니다. 이는 캐시에서 페이지를 가져올 때 쉽게 발생할 수 있습니다. 사용자가 혼란스러워하고 나타나는 선택을 보려면 한번 더 시도해야 할 수도 있습니다.