javascript - jQuery appendTo(), json 在 IE 6,7,8 中不起作用

Question

这两天我绞尽脑汁，试图找到解决方案。我使用 jQuery.ajax() 从数据库中获取值，以便在另一个框发生更改时更新一个框。 php 脚本从数据库中获取值，然后输出 json。它在 FF 中工作正常，但在所有版本的 IE 中，选择框都不会更新。我已经确认输出的 json 是好的。

这是 jquery:

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

我的 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);

它输出正确的 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 .

使用“vanilla”Javascript，您可以使用 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);
}