jQuery appendTo(), json not working in IE 6,7,8

Question

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?

Answer 1

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