jQuery IE9 repopulating select options with ajax

Question

The following code works perfectly in non-IE browsers. Please note that these first three options were added via jQuery.

<select id="mySelect" name="mySelect">
  <option value="1">MyVal1</option>
  <option value="2">MyVal2</option>
  <option value="3">MyVal3</option>
</select>

I clear out the options so I can add new ones:

// my new values has the proper values of [{"Id": 4, "Text" : "MyVal4"}, {"Id": 5, "Text": "MyVal5"}]
$("#mySelect").empty();
for (var i = 0; i < myNewVals.length; i++) {            
  $("#mySelect").append('<option value="' + myNewVals[i].Id + '">' + myNewVals[i].Text + '</option');
}

It works the first time I try to populate it, but then every subsequent time thereafter, it repopulates the dropdown with the same values. Why does it ignore the new values when attempting to remake the options?

Try this: http://stackoverflow.com/questions/170986/what-is-the-best-way-to-add-options-to-a-select-from-an-array-with-jquery — Liam, Aug 17 '12 at 12:10
For some reason the list of options is retained ONLY in IE. I cannot figure out why! — Adam Levitt, Aug 17 '12 at 12:27
The array is just a sample of the data, it's not proper syntax. — Adam Levitt, Aug 17 '12 at 12:28

score 1 · Accepted Answer · answered Aug 17 '12 at 12:29

It's better to use a JSON array, try something like this:

<script>
    $(document).ready(function () {
        var myNewVals = { 4: 'Myval4', 5: 'Myval5' };

        $("#popButton").bind('click', function (event) {

            $("#mySelect").empty(); 
            $.each(myNewVals, function(val, text) {
                $("#mySelect").append($('<option></option>').val(val).html(text))
            });
        });
    });
</script>

<select id="mySelect" name="mySelect">
    <option value="1">MyVal1</option>
    <option value="2">MyVal2</option>
    <option value="3">MyVal3</option>
</select>
<input type="button" id="popButton" value="Populate!" />

score 0 · Answer 2 · answered Aug 17 '12 at 12:36

0

The problem was caused because I was attempting to remove the disabled attribute from the dropdown. If I disable it in between repopulations, it seems to work. Very stupid bug.

answered Aug 17 '12 at 12:36

Adam Levitt

10,316
26
84
145

jQuery IE9 repopulating select options with ajax

2 Answers2