jQuery, Java Script : AJAX에서 빌드 드롭 다운 : 예제, 구현

jQuery, Java Script : AJAX에서 빌드 드롭 다운 : 예제, 구현

 

최근 프로젝트에서 HTML 선택 드롭 다운을 채울 많은 AJAX 요청을 수정해야했습니다. 이 게시물에서는 AJAX 요청의 반환을 처리하고 드롭 다운을 채울 방법을 간략하게 보여줍니다. 먼저 ID 속성을 사용하여 페이지에 HTML 드롭 다운을 만듭니다.

 

<select id="dropdown"></select>

 

다음으로 jQuery에서 urlPath에 대한 AJAX POST를 생성하여 JSON 객체에 필요한 데이터를 반환합니다. 이 AJAX 요청이 리턴되면 응답을 구문 분석하고 작성할 helpers.buildDropdown 함수에서 이를 사용합니다.

 

$.ajax({
            type: "POST",
            url: urlPath,
            success: function(data)
            {
                helpers.buildDropdown(
                    jQuery.parseJSON(data),
                    $('#dropdown'),
                    'Select an option'
                );
            }
        });

 

AJAX 호출에서 예상되는 응답은 아래 데이터와 유사한 JSON 객체이며 각각 ID 열과 NAME 열이 있는 여러 행으로 구성 될 수 있습니다. ID 열은 옵션 요소 값 속성을 채우는 데 사용되고 NAME 열은 옵션 요소 내부의 텍스트로 사용됩니다. 원하는 필드를 가질 수 있지만 이 예에서는 buildDropdown 함수에 필요한 열입니다.

 

 

[
    {"id":1,"name":"Option 1"},
    {"id":2,"name":"Option 2"},
    {"id":3,"name":"Option 3"},
    {"id":4,"name":"Option 4"},
    {"id":5,"name":"Option 5"},
]

 

데이터를 작성하고 예상대로 리턴하면 buildDropdown 함수를 작성할 수 있습니다. 먼저 이 함수를 헬퍼 네임 스페이스 내에 배치하여 시작합니다. 따라서보다 유용한 함수를 만들 때 이 네임 스페이스에 계속 추가 할 수 있습니다.

다음으로 함수를 작성하고 3 개의 매개 변수를 전달하십시오. 결과는 JSON 데이터 오브젝트이고 드롭 다운은 드롭 다운의 jQuery 오브젝트이며 emptyMessage는 첫 번째 빈 옵션에서 사용할 수 있는 텍스트입니다.

 

 

var helpers =
{
    buildDropdown: function(result, dropdown, emptyMessage)
    {
        // Remove current options
        dropdown.html('');

        // Add the empty option with the empty message
        dropdown.append('<option value="">' + emptyMessage + '</option>');

        // Check result isnt empty
        if(result != '')
        {
            // Loop through each of the results and append the option to the dropdown
            $.each(result, function(k, v) {
                dropdown.append('<option value="' + v.id + '">' + v.name + '</option>');
            });
        }
    }
}