CODEWITHSUNDEEP
javascriptjsoninternet-explorer
Agassis
Agassis

Reputation: 113

JSON: selected option is not working in IE while works in firefox

I have the following query on JSON: selected option is not working in IE while works in firefox.

I have the example data like:

 var columnDefs = [...
 {"name":"childPerformancePrice", "label":"Cosell Price", "type":"int", "control":"select", "options":performancePrices, "align":"left", "default":"", "required":false,"size": 6},
 ...]

The performance dropdownlist like:

function getPerformancePrices(){
    ......
      $.getJSON("?data=performancePrices", function(list) {
          performancePrices.push([0, ""]);
          $.each(list, function(index, item) {
            performancePrices.push([item.id, item.description]);
            performancePrices.sort();

          });
        ...
      });
  }

example JSON data like JSON.stringify(columnDefs[index]):

{"name":"childPerformancePrice", "label":"Cosell Price", "type":"int", "control":"select", "options":[[0,""],[15000,"Band 1"],[15001,"Band 2"],[15002,"Band 3"]],"align":"left", "default":"", "required":false,"size": 6}

Question: why the below selected option during edit is not working (i.e., not selecting properly in IE) in IE while works well in Firefox?

 function selectCell(oColumnDef, value) {
    var oSelect = createNamedElement("select", oColumnDef["name"]);
    if (value == undefined) {
      value = "";
    }
    $.each(oColumnDef["options"], function(index, item) {
        var oOption = document.createElement("option");
        oOption.value = item[0];
        oOption.text = item[1];
        if (item[1] == value) {
          oOption.selected = true;
        }
        oSelect.options.add(oOption);
    });

Upvotes: 4

Views: 492

Answers (1)

Adam Rackis
Adam Rackis

Reputation: 83358

The only thing I can think of is that, since it works in FF, but not IE, there's something about how you're creating these options that the latter doesn't like. Since you're already using jQuery, try changing this:

var oOption = document.createElement("option");
oOption.value = item[0];
oOption.text = item[1];
if (item[1] == value) {
     oOption.selected = true;
}
oSelect.options.add(oOption);

To this:

var oOption = $("<option />",  { "value": item[0],
                                 "text": item[1],
                                 "selected": item[1] === value
                               });
$(oSelect).append(oOption);

With the assumption that jQuery will iron over whatever quirks IE has.

Upvotes: 1

Related Questions