동적으로로드 된 선택 항목에 옵션 추가

Question

012에 동적으로 추가 된 선택 항목에 <option>...</option>을 추가하는 가장 좋은 방법은 무엇입니까?

나는 <select>이라는 일반 의미에서 이후에 ajax 호출이 추가되었음을 의미합니다. select 요소를 표시하기 전에 옵션을 추가하고 싶습니다.

감사합니다.

편집

이것은 내가이 내가 서버에서 옵션을 얻을 수있는 코드가

$.ajax({ 
    type: "get", 
    url: baseUrl + 'MyService.asmx/NewReferent', 
    data: JSON.stringify({}), 
    contentType: "application/json; charset=utf-8", 
    dataType: "json", 
    success: function (msg) { 
     // Get the referent item from the webservice 
     var referent = msg.d; 
     // Render the template with the Referent data 
     var referentTemplate = $("#referentTemplate").tmpl(referent); 
     //add button style 
     $(".button", referentTemplate).button(); 
     //Show the Dialog 
     $("#referent-dialog").empty().html(referentTemplate).dialog('open'); 
    } 
}); 

이 그 기능입니다

$.getJson(baseUrl + 'MyService.asmx/GetReferentTypes', function (data) { 
    $.each(data, function (key, value) { 
     $('#select_id').append($("<option></option>").attr("value", key).text(value)); 
    }); 
}); 

편집 2

불행히도 내 코드로 무슨 일이 벌어지고 있는지 이해할 수는 없습니다. @Raynos의 코드 일부 약간의 수정으로 내 $.each() 함수 호출에서 올바르게 구문 분석되지 않은 서버

{"d": 
    [ 
     {"__type":"Full.Namespace.Path.ReferentType","ReferentTypeID":1,"Description":"option1"}, 
     {"__type":"Full.Namespace.Path.ReferentType","ReferentTypeID":2,"Description":"option2"} 
    ] 
} 

에서 다음 JSON 데이터를 수신 할 수있게되었습니다. 지금 두 가지 질문이 있습니다.

• 누가 _type 매개 변수를 추가 할 예정입니까?
• 구문 분석을 어떻게 수정할 수 있습니까? each()?

Answer 1

$("<select>").append(
    $("<option>" , { 
     text: "foo", 
     value: "bar" 
    }) 
).appendTo("#container"); 

트릭은 당신이 뭔가에 선택을 추가하기 전에 옵션을 추가하는 것입니다.

또는 DOM에 추가하기 전에 선택 영역을 숨길 수 있습니다.

의사 코드 :

$.when(ajax).then(function(html) { 
    var foo = $(html); 
    foo.find("select.SomeClass").hide(); 
    ... 
}); 

... 

$("select.SomeClass").append($("<option>")).show() 

는 [[편집]

은 쓰기 위해 일 확인 $.when 마법의 간단한 비트를 사용합니다. 나는.선택 템플릿은 다음 옵션

이

$.when(
    $.ajax({ 
     type: "get", 
     url: baseUrl + 'MyService.asmx/NewReferent', 
     data: JSON.stringify({}), 
     contentType: "application/json; charset=utf-8", 
     dataType: "json", 
     success: function (msg) { 
      // Get the referent item from the webservice 
      var referent = msg.d; 
      // Render the template with the Referent data 
      var referentTemplate = $("#referentTemplate").tmpl(referent); 
      //add button style 
      $(".button", referentTemplate).button(); 
      //Show the Dialog 
      $("#referent-dialog").empty().html(referentTemplate).dialog('open'); 
     } 
    }); 
}).then(function() { 
    $.getJson(baseUrl + 'MyService.asmx/GetReferentTypes', function (data) { 
     $.each(data, function (key, value) { 
      $('#select_id').append($("<option></option>").attr("value", key).text(value)); 
     }); 
    }); 
}); 

[[편집 2]

가 부여 샘플 JSON 구조

$.each(data.d, function (key, value) { 
    $('#select_id').append(
     $("<option></option>") 
      .attr("value", value.ReferentTypeID) 
      .text(value.Description) 
    ); 
}); 

생성겠습니까 추가됩니다 만들어집니다

<option value="0">option1</option> 
<option value="1">option2</option> 

Answer 2

이 간단한 대답은 당신을 도울 것입니다,

var selectField = $('#' + id_of_field); 
var empIds = [101, 102, 103]; 
var empNames = ['X', 'Y', 'Z']; 
var options = ''; 
selectField.empty(); 
for (var i = 0, len = empIds.length; i < len; i++) { 
    options += '<option value="' + empIds[i] + '">' + empNames[i] + '</option>'; 
} 
selectField.append(options);