Setting select value after appending an option fails in IE9

[anonymous]

See ​http://stackoverflow.com/questions/13821870/add-option-to-a-select-and-select-it

​http://jsfiddle.net/tEUxg/7/

Basically, this fails (only in IE9, apparently):

    var $option = $("<option>").text("1").val("1");

    $("select").prepend($option).val(1);

The solution is to add a dummy accessor. This works:

    var $option = $("<option>").text("1").val("1");

    $("select").prepend($option).each(function() {
      this[0];  // whatever, but not e.g. nodeType
    }).val(1);

[anonymous]

Ugh, I meant prepending as the code also shows. Appending works fine...

[anonymous]

A summary of the fixes discovered:

• .val(1).val(1) works - not sure why.
• .dequeue() or .delay(1) work because they call $.data, which contains the accessor that fixes the bug. (Note that .delay() doesn't affect .val(1) but it's just the accessor in its code path that does the job.)
• Using setTimeout with a function that sets the value also solves the issue.

[dmethvin]

Confirmed that it fails on IE9, also *not* on IE10. In the original example there is actually a text node as elem.firstChild of the select, but changing that had no effect on the bug: ​http://jsfiddle.net/tEUxg/8/show/

Of the proposed workarounds, any that involve async such as setTimeout are definitely out. I am not sure this is something that we should solve at the core level given its obscurity but if someone has a simple patch that doesn't cause performance issues we could give it a try.

[anonymous]

In the setter valHook for select elements, adding elem[0]; right after the values assignment on the first line fixes the issue. I think this is a simple fix without any performance impact.

[dmethvin]

Great, can you put together a pull request with unit tests?