Question

I have this code

var opt = $("select option:first");
opt.remove();

$("button").on("click", function() {
    $("select").prepend(opt).val(1);
});

That works fine in some browser. But, of course, IE isn’t one of them. In IE the combo ends with the two options, but the text is in blank (there is no selected option). I assume this is because the option is still not loaded into the DOM. I assume that because I can easily fix this problem using this code instead:

var opt = $("select option:first");
opt.remove();

$("button").on("click", function() {
    $("select").prepend(opt);
    setTimeout(function() {
        $("select").val(1);
    }, 1);
});

However, I would prefer something nicer. Any ideas?

Note: I’m not looking for performance in the selector or things like that. The posted code is just a reduced example, not my real script.

Answer 1

This seems to work on all browsers, though I have no idea why your original code failed in IE.

var opt = $("select option:first");
opt.detach();

$("button").on("click", function() {
    $("select").prepend(opt).prop("selectedIndex", 0);
});

http://jsfiddle.net/tEUxg/5/