2 replies to this topic

[thatsme]

Hi. This code should take strings from subCategories array, put them between <option> tags and finally add to <select> element's (subCategoriesList) inner html. It works fine in all browsers except IE. Instead of adding <option value="...">...</option><option value="...">...</option>..other options IE always misses first <option> opening tag and adds ...</option><option value="...">...</option>..other options. Function getOptions returns correct string containing options in both IE and other browsers. Only line subCategoriesList.innerHTML += options; fails in IE.

var subCategoriesList = document.getElementById("subCategoriesList");
...
var subCategories = [];
for (var i = 0; i < subMenuButtons.length; i++)
    subCategories[i] = subMenuButtons[i].getAttribute("category");
var options = getOptions(subCategories);
subCategoriesList.innerHTML += options;

function getOptions(optionsArray){
    var options = "";
    for (var i = 0; i < optionsArray.length; i++){
        if (i == 0)
            options = "<option value='" + optionsArray[i] + "' selected>" + optionsArray[i] + "</option>";
        else
            options += "<option value='" + optionsArray[i] + "'>" + optionsArray[i] + "</option>";
    }
    return options;
}

[Vaielab]

WOw I did a little research for you, and I founded out this is a bug in IE since ie5!!!

Here is a blog that talk about this bug Bug when creating select options using innerHTML in IE by Stuart Colville
And the best solution (in my opinion) is using the "new Option" command
More info here HTML/JavaScript - Select list - Add/Remove Options (Old School) - mredkj.com
Your gonna have to change a little bit of you code, your function getOptions will have to receive the array and the select element.

[thatsme]

Thanks. Solved. IE is really annoying.