refreshing the contents of a listbox with .append(

Question

With jQuery on Firefox and Chrome I can just dynamically change the data in a listbox with $().append() statements or whichever way I need to. The same code doesn't work with IE. The listbox (<select></select>) is just static and none of the elements are added/removed/changed.

I heard IE can be a bit "different" in handling listbox (<select></select>) re-rendering.

How can you make jQuery's .append() work with Internet Explorer?

Answer 1

What are you trying to do. If you just want to load data using ajax and wanted to manipulate your <select></select>

var listBox = $("#CountyList");
$.post("/County/List/" + stateId, null, function (data) {
    var items = "<option value='0'>Select County</option>";
    $.each(data, function (i, c) {
        items += "<option value='" + c.Value + "'>" + c.Text + "</option>";
    });

    listBox.html(items);
}, 'json');

You then just need to form a string with all your option elements in it, then load it unto the select box using .html()

if you want a more elegant way to manipulate your select box . You could give this a try. http://www.texotela.co.uk/code/jquery/select/