[SPRING] jquery를 사용하여 select의 모든 옵션을 어떻게 업데이트합니까?

jquery를 사용하여 select의 모든 옵션을 어떻게 업데이트합니까?

내 컨트롤러에서 Spring ModelAndView에 배치 할 맵 객체가 있고 select를 채울 JSP로 포워딩합니다. 처음으로 채운 후에 jQuery AJAX를 사용하여 json 객체를 검색하고 jQuery.parseJSON을 사용하여 객체로 변환하는 json 객체로 select 객체를 채우는 데 사용 된 map 객체를 교체하려고합니다. select의 전체 내용을 json 객체의 내용으로 동적으로 바꿀 수 있습니까?

해결법

1. ==============================

   1.실제로 옵션을 수정하려면 jQuery가 실제로 필요하지 않습니다. SELECT 상자의 options 속성의 length 속성에 할당하여 이전 옵션을 지우고 #add 및 new Option ()을 통해 새 옵션을 추가 할 수 있습니다.

   실제로 옵션을 수정하려면 jQuery가 실제로 필요하지 않습니다. SELECT 상자의 options 속성의 length 속성에 할당하여 이전 옵션을 지우고 #add 및 new Option ()을 통해 새 옵션을 추가 할 수 있습니다.

   다음은 XHR 부분에 jQuery를 사용하고 몇 가지 옵션을 직접 적용하는 두 가지 예제입니다.

   객체 내의 배열 (이 경우 결과 객체의 속성 옵션으로 식별되는 배열)에서 데이터를 그리는 경우 :

   JSON :

   {
     "options": [
       {"value": "New1", "text": "New Option 1"},
       {"value": "New2", "text": "New Option 2"},
       {"value": "New3", "text": "New Option 3"}
     ]
   }
   

   자바 스크립트 :

   $.ajax({
     url: "http://jsbin.com/apici3",
     dataType: "json",
     success: function(data) {
       var options, index, select, option;
   
       // Get the raw DOM object for the select box
       select = document.getElementById('theSelect');
   
       // Clear the old options
       select.options.length = 0;
   
       // Load the new options
       options = data.options; // Or whatever source information you're working with
       for (index = 0; index < options.length; ++index) {
         option = options[index];
         select.options.add(new Option(option.text, option.value));
       }
     }
   });
   

   실제 예제

   개체의 속성 이름을 옵션 값으로 사용하고 속성 값을 옵션 텍스트로 사용하는 경우 :

   JSON :

   {
     "new1": "New Option 1",
     "new2": "New Option 2",
     "new3": "New Option 3"
   }
   

   자바 스크립트 :

   $.ajax({
     url: "http://jsbin.com/apici3/2",
     dataType: "json",
     success: function(data) {
       var name, select, option;
   
       // Get the raw DOM object for the select box
       select = document.getElementById('theSelect');
   
       // Clear the old options
       select.options.length = 0;
   
       // Load the new options
       for (name in data) {
         if (data.hasOwnProperty(name)) {
           select.options.add(new Option(data[name], name));
         }
       }
     }
   });
   

   실제 예제

   업데이트 :

   select.options.add(new Option(...));
   

   당신은 또한 할 수 있습니다 :

   select.options[select.options.length] = new Option(...);
   

   실제 예제

   ... 나는 실제로 배열 array-like-thing에 add 메소드를 사용하는 경향이 있다고 생각합니다. (배열에 메서드가 있기 때문에 배열이라고 부르지 않습니다. push를 사용하면 어떤 배열에도 push가 작동하지 않는다).

   에 두 가지 방법을 테스트했습니다.

   둘 다 작동합니다. 아마 Mac을 가지고있는 누군가가 나를 위해 OS X에서 Safari를 시험해 볼 수 있습니다.

   나는 두 가지 방법 모두 아주 잘 지원한다고 말하고 싶습니다.

2. ==============================

   2.

          $.ajax({
                   type: 'POST',
                   url: getpolicytypeUrl ,
                   data: { sirket: companyname },
                   success: function (data) {
   
                       $.each(data, function(index, element) {
                           $('#policyshortname').append($('<option>', {
                               text: element.policyShortname
                           }));
                           $('#policyshortname').show(300);
                       });
   
                   }
               });
   
   
           $('#policyshortname').html('refresh',true);
   

from https://stackoverflow.com/questions/5022928/how-do-you-update-all-options-of-a-select-with-jquery by cc-by-sa and MIT license