Question

我已经绞尽脑汁两天试图找到解决方案了。我正在使用jQuery.ajax（）从数据库中获取值，以便在更改另一个框时更新框。 php脚本从数据库中获取值，然后吐出json。 IT在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);
}

jQuery appendTo（），json无法在IE 6,7,8中运行

1 个答案: