Question

I’m programmatically changing the option children of a select element with jQuery.

The changes are being applied to the DOM, but are not visible on the screen.

This is what I get on the screen:

And this is what I see when I inspect the select element:

Here is the code that I use to update the select element:

    select.empty();
    $.each(this.entries, function() {
        var option = $$("<option/>");
        option.attr("value", this.value);
        option.text(this.label);
        select.append(option);
    });

This clearly seems like a bug to me. Can anybody tell me what is wrong with this or indicate a workaround ?

Note: for reasons beyond my control, the page is in quirks mode.

Answer 1

The documentation for the SelectElement is here: https://developer.mozilla.org/en-US/docs/DOM/HTMLSelectElement

You can add options like this:

$("#sel")[0].options.add(new Option("test", "123")); //haven't tested all browsers

The docs say that you call add on the select element itself, passing in an option node:

$("#sel")[0].add($("<option>").val("456").prop("text", "Test2")[0], null);

both tested (and working) in IE8 here: http://jsfiddle.net/82gCq/2/

Note — The docs for HTMLOptionsCollection does not specify an add method, so it is not standardized, and its implementation will be left to the browser (if they implement it at all).

The good news is that $("#sel")[0].add(new Option("test3", "789")); works in IE8, and should work in other browsers as well.