jQuery appendTo()，json在IE 6,7,8中不起作用 [英] jQuery appendTo(), json not working in IE 6,7,8

问题描述

我已经竭尽全力了两天，试图为此找到解决方案.我正在使用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()无法正常工作.

有人有什么主意吗?

解决方案

我对jQuery没有处理此问题感到有些惊讶(我认为它确实可以解决……也许它的.html()有效). /p>

该问题基于 IE(6,7，& 8)错误，导致您无法设置选择列表的.innerHTML..

使用原始" 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);
}

I've been racking my head for two days trying to find a solution for this. I'm using jQuery.ajax() to grab values from the database to update a box when another box is changed. The php script grabs the values from the database and then spits out json. IT works fine in FF but in all versions of IE the select box doesn't get updated. I've confirmed that the json being output is good.

Here is the 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);
    }); 
});

I've got this in my 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);

And it's outputting the correct json with no extra commas or anything. What's more is that If I use alert(j.value + j.text); in my .each() loop, I get the correct data in IE so it seems that it's the jquery appendTo() that's not working.

Anybody got any ideas?

解决方案

I'm a bit surprised that jQuery isn't handling this (I thought it did... maybe its the .html() that works).

The issue is based on an IE (6,7,& 8) bug that you can't set the .innerHTML of a select list.

Using "vanilla" Javascript you can use the Option object to create new options and add them to a select, or you can set the entire Select list at once (e.g. including the select tags).

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中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！