jQuery appendTo(), json이 IE 6,7,8에서 작동하지 않습니다.

Question

저는이 문제에 대한 해결책을 찾기 위해 이틀 동안 머리를 숙이고 있습니다. jQuery.ajax() 다른 상자가 변경 될 때 상자를 업데이트하려면 데이터베이스에서 값을 가져 오는 데 사용하고 있습니다. PHP 스크립트는 데이터베이스에서 값을 가져온 다음 json을 내뱉습니다. IT는 FF에서는 잘 작동하지만 IE의 모든 버전에서는 선택 상자가 업데이트되지 않습니다. json이 출력된다는 사실을 확인했습니다. 여기

은 JQuery와입니다 : 내 PHP

header('Cache-Control: no-cache, must-revalidate'); 

header('Expires: Mon, 26 Jul 1997 05:00:00 GMT'); 

header('Content-type: application/json'); 


echo json_encode($json); 

이있어

function getVendors(dest,selectSup) 
{ 
    var vend = $('select#sup').val(); 
    $.ajax({ 
     beforeSend: function(){ 
     $("select#dest").parent().addClass('loading'); 
     }, 
     type: "GET", 
     dataType: "json", 
     cache: false, 
     url: '/search/cruiseselect/?type=vendors&supplier=' + vend + '&dest=' + dest, 
     timeout: 2000, 
     error: function() { 
     alert("Failed to submit"); 
     }, 
     success: function(data) { 
      $("select#sup option").remove(); 
      var any = "<option value=\"any\">-- All Cruise Lines --</option>"; 
      $(any).appendTo("select#sup");     
      $.each(data, function(i, j){ 
       if(j != null && j != undefined) { 
        var sel = j.value == selectSup ? " selected" : ""; 
        var row = "<option value=\"" + j.value + sel + ">" + j.text + "</option>";  
        //$(row).appendTo("select#sup");     
        $("select#sup").append(row); 
       } 
      }); 
     }, 
     complete: function(){ 
     $("select#dest").parent().removeClass('loading'); 
     } 
    }); 
} 
jQuery(document).ready(function(){ 

    //dynamic select boxes 
    $("select#dest").change(function(){ 
     var selectSup = $("select#sup").children("option:selected").val(); 
     getVendors($(this).val(),selectSup); 
    }); 
}); 

그리고 별도의 쉼표 나 아무것도 올바른 JSON을 출력합니다. 더 중요한 것은 alert (j.value + j.text)를 사용하면; 내 .each() 루프에서 IE에서 올바른 데이터를 얻을 수 있으므로 jquery appendTo()가 작동하지 않는 것 같습니다.

아무도 아이디어가 없습니까?

Answer 1

저는 jQuery가 이것을 처리하지 않는다는 것에 조금 놀랐습니다. (나는 그것이 ... 아마도 그것의 .html()이 효과가있을 것이라고 생각했습니다).

문제는 IE (6,7,& 8) bug that you can't set the .innerHTML of a select list을 기반으로합니다.

"바닐라"자바 스크립트를 사용하면 Option 개체를 사용하여 새 옵션을 만들고이를 선택 항목에 추가하거나 전체 선택 목록을 한 번에 설정할 수 있습니다 (예 : 선택 태그 포함).

var mySelect = $("select#sup").get(0);//get actual DOM element 
var newOpt,selLen; 
for(var i=0;i<10;i++){ 
    newOpt = new Option('Label: ' + i, i); 
    //format new Option(text, value, defaultSelected, selected); 
    //add new option to select object 
    selLen = mySelect.options.length; 
    mySelect.options[selLen] = newOpt; 

    //This may also work, but I don't recall if IE6 supports the .push() 
    //method on the options collection, if so, this line will replace the 2 above 
    // mySelect.options.push(newOpt); 
}