Well this was a fun one.

So I discovered an inconsistency in Internet Explorer 9 that drove me up a wall the other day. It worked in FireFox and Chrome to my dismay because as most web developers know script debugging with IE's developer tools is a blast!

I saw this when I was trying to dynamically add an option to a select element and then trying to focus that option. It seemed like IE was ignoring my calls to focus my new element. To help illustrate the issue I have two examples:

First Scenario (the one that doesn't work in IE)

I start with a select having two options:

<select id="select">
    <option>option 1</option>
    <option>option 2</option>
</select>

I then add a new option to the select with JQuery and try to select it using the .attr() method:

var $newOpt = $('<option>New Option</option>');
var $select = $('#select');
$select.prepend($newOpt);
$newOpt.attr('selected','selected');

In Firefox and Chrome this works as expected. My option is added to the select and then it is focused. However, in Internet Explorer the option is only appended, not focused. (See the demo below)

First Scenario Demonstration

Second Scenario

I start with a select with three options, focusing 'option 1' by default:

<select id="select">
    <option>option 1</option>
    <option>option 2</option>
    <option id="new">New Option</option>
</select>

I use JQuery to focus the New Option:

var $newOpt = $('#new');
$newOpt.attr('selected','selected');

Interestingly enough this works in all three browsers: Internet Explorer 9, FireFox, and Chrome. (See the demo below)

Second Scenario Demonstration

Work-Around

I eventually found a workaround that wasn't so obvious originally since I had a great deal of complexity surrounded this issue at the time. I ended up using:

$select.children().removeAttr('selected');

To remove all selected attributes from the select before trying to focus the newly added option.

Work-Around Demonstration

Question

I've been searching the web and I haven't found this documented anywhere so I'm wondering. Is it a bug? If so, is it a bug with JQuery or Internet Explorer? If not, am I using the attr() method incorrectly?

If anyone could shed some light on this it would be great. Thanks!

Try using selectedIndex.

$(function () {
    var $newOpt = $('<option>New Option</option>');
    $('#select').prepend($newOpt).prop('selectedIndex', 0);
});

Demo

It seems like a long runnign IE bug not fixed in jquery.

This works in IE though

 $(function () {
    var newOpt = document.createElement('OPTION');
    newOpt.innerHTML = 'New Option';
    var select = document.getElementById('select');
    select.add(newOpt,select.options[0]);
    $('#select option:first').prop('selected', true);
});

Demo

.add