Dynamically generated Select List not populating in IE <9

Question

I have a select drop down dynamically populated by an AJAX call. It is working correctly in all browsers besides IE 8 and below. The browser isn't rendering the elements within the tag. The following is the set up of the list:

for (var Id in Options.items) {
                var option = document.createElement('option');
                option.value = Id;
                option.textContent = Options.items[Id];
                if (Options.defaultId === Id) {
                    option.setAttribute('selected', 'selected');
                }
                select.appendChild(option);
            }

            return select.outerHTML;

Is any of this code incompatible with older versions of IE? Search results have mentioned "setAttribute" can cause problems, so I did try switching that line to 'option.Selected="Selected"', to no effect. I have a feeling my issue lies with how I append the options to the list with appendChild or return the outer HTML, but not sure where to start. Do those tend to create issues with IE? Any help is greatly appreciated, thank you.

Answer 1

you are using .textContent and it is not supported IE8 and below. Change it to innerHTML and it should work.

See .textContent

for (var Id in Options.items) {
    var option = document.createElement('option');
    option.value = Id;
    option.innerHTML = Options.items[Id]; //<--here

    if (Options.defaultId === Id) {

        option.setAttribute('selected', 'selected');
    }
    select.appendChild(option);
}

Demo

Answer 2

From your explanation I understand your problem is that the browser does not highlights (selects) the proper option... if that´s correct, instead of:

option.setAttribute('selected', 'selected');

use:

select.value = Id;

as far as I know that works in all browsers.