IE/jquery compatibility, dynamically populating a select field

Question

Hi,

Not sure where to even start on this one...

I have a function that takes a select input field ID and populates it with an array of options.

function populateSelect(selectId, options){

    options = options.split(';');
    selectId.find('option').remove().end();

    $.each(options, function(i, option){
      option = option.split(':');
      selectId.append($('<option />').val(String(option[0].trim())).text(String(option[1].trim())));
    });
}

An example call would be...

selectId = $("#dateBar_graphSelect");
var options = 'Pie:Pie;Column:Column';
populateSelect(selectId, options);

The error I'm getting in IE 8 is...

Object doesn't support this property or method (selectId.append line)

Considering that line has several methods being called I have NO IDEA what could be going on here.

Even a tip on debugging situations like this would do a world of good for me!!

-thanks in advance for the help

Answer 1

The script breaks at option[0].trim()

This works...

function populateSelect(selectId, options){

    options = options.split(';');
    selectId.find('option').remove().end();

    $.each(options, function(i, option){
      option = option.split(':');

     selectId.append($('<option>')
            .val(String(option[0])) //NOTE - no trim
            .text(String(option[1])));
    });
}