André Leria
André Leria

Reputation: 392

jQuery AJAX can't fill select box in Internet Explorer

I have some code like this:

var mySelect = document.getElementById("mySelect");
mySelect.innerHTML = "<option>Loading...</option>";
$.get("ajaxPage.php", {"args":args}, function(r) {
    mySelect.innerHTML = r;
});

The ajax response is something like this:

<option value="1">Option 1</option>
<option value="2">Option 2</option>

And it works gracefully in Chrome, Aurora / Firefox, Opera and Safari (I've tested each one), but IE9 refuses to accept the response.

After looking at IE9's 'Inspect Element' window (I don't know exactly its name) I could see IE9 tries to render the response as a simple text node, such as:

Option 1Option 2

And why that happens is what is bugging me.

I'm sorry if that was already questioned here, I did a little searching and could see no answers that could help me.

TIA, André

Upvotes: 1

Views: 1749

Answers (3)

Nikolay Zakharov
Nikolay Zakharov

Reputation: 162

The only good practice for any browser, and the only working with Internet Explorer is using DOM, not just html'ed string. Something like this:

Code:

<script>
$('select#my_select')
    .append($( document.createElement('option') ).val('opt1').html('Option 1'))
    .append($( document.createElement('option') ).val('opt2').html('Option 2'));
</script>

Before:

<select id="my_select"></select>

After:

<select id="my_select">
    <option value="opt1">Option 1</option>
    <option value="opt2">Option 2</option>
<select>

Upvotes: 2

geilt
geilt

Reputation: 805

Try using

$('#mySelect').html("<option>Loading...</option>");

It seems like IE is not evaluating your HTML, jQuery should take care of that issue for you.

Upvotes: 2

James L.
James L.

Reputation: 4097

This has been an IE bug for as long as I can remember: http://support.microsoft.com/kb/276228

I think that the JQuery equivalent has the bug fixed:

mySelect.innerHTML = r;
//change to
$(mySelect).html(r);

Upvotes: 3

Related Questions