Jump to content

Check out our Community Blogs

Register and join over 40,000 other developers!

Recent Status Updates

View All Updates

- - - - -

Problems while tying to add <option> tags to html in IE8

HTML innerHTML ie8

  • Please log in to reply
2 replies to this topic

#1 thatsme


    CC Addict

  • Advanced Member
  • PipPipPipPipPip
  • 218 posts

Posted 05 September 2011 - 02:47 AM

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>";
            options += "<option value='" + optionsArray[i] + "'>" + optionsArray[i] + "</option>";
    return options;

  • 0

#2 Vaielab


    Programming God

  • Expert Member
  • PipPipPipPipPipPipPip
  • 1382 posts
  • Location:Quebec City
  • Programming Language:Java, C++, C#, PHP, JavaScript, Visual Basic .NET, Transact-SQL, ActionScript

Posted 05 September 2011 - 05:51 AM

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.
  • 0

#3 thatsme


    CC Addict

  • Advanced Member
  • PipPipPipPipPip
  • 218 posts

Posted 06 September 2011 - 10:59 PM

Thanks. Solved. IE is really annoying.
  • 0

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download