JQuery - dynamic selects and options not working in IE9

Question

I have a dynamic select that needs to be driven off another select, but I cannot seem to get it working in IE (using IE9). I've seen this post here but (unless I'm not understanding it) this didn't seem to help: Dynamic Related Selects with jQuery, not work in IE.

I've really simplified it so that it's easy to understand the problem. I have 2 selects, and 1 drives the other. So, when you select something in the first one, the second one changes. For this example I'm just adding a new item to the select and even this doesn't work in IE:

var mydiv = $("#testdiv");
$("<select id='f1'>").appendTo(mydiv);
$("<select id='f2'>").appendTo(mydiv);
$("#f1").append("<option value='1'>1</option>");
$("#f1").append("<option value='2'>2</option>");
$("#f2").append($("<option>").attr("value", "n"));
$("#f1").change(function () {
    $("#f2").append("<option value='t1'>t1</option>");
});

<div id="testdiv"></div>

So, in theory we should start with 2 select lists and "f2" will 1 blank option in it.

Next, select an item from "f1" and it will add a new option to "f2".

This works exactly as I want in firefox and chrome. In IE it just behaves oddly. Take this example in IE:

Scenario 1

1. I open the page and check the "f2" select. It has 1 blank value
2. I select an item in "f1"
3. I check "f2" and it still has 1 blank value

Scenario 2

1. I open the page and don't touch the "f2" select.
2. I select an item in "f1"
3. I check "f2" and it has 2 items!
4. I select another item in "f1"
5. I check "f2" and it still has 2 items?!?

So it looks like the first time I activate the select control it must do something with the existing HTML... and now that's all it's going to render from here on...

This is driving me nuts, what am I doing wrong?!?

Note: Not sure if it matters, but both of the selects are dynamically generated using javascript/jquery because I don't know their values until an async call completes.

Updated question due to investigation through comments... Seems my last note on the dynamic creation of the objects was crucial to recreating the problem

Answer 1

i got it to work using jquery clone:

$("#f2").append("<option value='t1'>t1</option>");
var $temp = $("#f2").clone();
$("#f2").html($temp.html());

Your answer helped me but i think because my select was in a modal it acted weird and this is the only way i could get it to work in IE. Hope this helps someone else.

Answer 2

Figured it out. Read on a few websites about some bugs with selects in IE and having to use divs as a workaround. So the solution is to repost the html in the div each time you want to refresh the list. Something like this:

var mydiv = $("#testdiv");
var mydiv2 = $("#testdiv2");
$("<select id='f1'>").appendTo(mydiv);
$("<select id='f2'>").appendTo(mydiv2);
$("#f1").append("<option value='1'>1</option>");
$("#f1").append("<option value='2'>2</option>");
$("#f2").append($("<option>").attr("value", "n"));
$("#f1").change(function () {
    var tempdiv = $("<div>");
    $("#f2").append("<option value='t1'>t1</option>");
    $("#f2").appendTo(tempdiv);
    $("#testdiv2").html($(tempdiv).html());
});

...

<div id="testdiv"></div>
<div id="testdiv2"></div>

The important part being "testdiv2" and populating it with the html from "tempdiv". Might be a neater way to do this but in the mean time the above works for me. Here's a working solution in jsfiddler: http://jsfiddle.net/VHPt5/4/

Update

Also, a slightly different way to achieve the same thing as posted in a comment by @Ingenator in a different answer below. Rather than replacing the HTML like this:

$("#f2").appendTo(tempdiv);
$("#testdiv2").html($(tempdiv).html());

You can clear the original div and re-append it:

$("#testdiv2").clear();
$("#f2").appendTo($("#testdiv2"));

Ultimately, the same solution, but removing the need to generate a tempdiv in order to replace the html of the first div.

Solution here: http://jsfiddle.net/cAr57/3/

Answer 3

The reason it's not working on IE is because you're trying to insert a select element into a select element, it makes sense, try not to add the select tag only the new options.

<td>
<select id='dinamicSelect'>
    <option value='2'>dinamicOption1</option>
    <option value='4'>dinamicOption2</option>
</select>
</td>

and the jquery

$('#dinamicSelect').html("<select><option value='123'>newOption</option></select>"); //won't work on IE

$('#dinamicSelect').html("<option value='123'>newOption</option>"); //Works

Hope this helps.

Answer 4

I have discovered another, easier work-around.

Set the options of the dynamically created select using append() or html(), then simply hide() and show() the select.

var mydiv = $("#testdiv");
$("<select id='f1'>").appendTo(mydiv);
$("<select id='f2'>").appendTo(mydiv);
$("#f1").append("<option value='1'>1</option>");
$("#f1").append("<option value='2'>2</option>");
$("#f2").append($("<option>").attr("value", "n"));
$("#f1").change(function () {
    $("#f2").append("<option value='t1'>t1</option>").hide().show();
});

<div id="testdiv"></div>

Answer 5

    $(document).ready(function () {
        $("#fieldtype1").append($('<option />', { 'text': 'n', 'value': 'n' }));

        $("#field1").on('change', function () {
            $("#fieldtype1").html('');

            var data = [{ 'name': '1', 'value': '1' }, { 'name': '2', 'value': '2' }, { 'name': '3', 'value': '3' }, { 'name': '4', 'value': '4'}]

            $.each(data, function (i, entity) {
                $("#fieldtype1").append($('<option />', { 'text': entity.name, 'value': entity.value }));
            });

            $("#fieldtype1").trigger('change');
        });
    });



<select id="field1">
    <option value="2">2</option>
    <option value="4">4</option>
</select>
<select id="fieldtype1">
</select>