JQuery - dynamic selects and options not working in IE9

JQuery - dynamic selects and options not working in IE9

by Thulasi Ram.S

HTML

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

JavaScript

$(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');
        });
    });