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



jquery hasclass (2)

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


Answer #1

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

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

배열에서 :

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

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));
    }
  }
});

실제 예제

객체로부터 직접 :

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

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 가 작동하지 않는다).

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

  • IE6,7,8 (Windows)
  • Chrome (Linux 및 Windows)
  • Firefox (Linux 및 Windows)
  • Opera (Linux 및 Windows)
  • Safari (Windows)

둘 다 작동합니다. 아마도 Mac을 가진 누군가가 나를 위해 OS X에서 Safari를 사용해 볼 수 있습니다.

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


Answer #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);




spring