Am I misunderstanding the use of .prop() or is this a bug?

Am I misunderstanding the use of .prop() or is this a bug?

Okay, so prior to yesterday I have always been using .attr() to retrieve an element's properties. I knew of .prop(), but I wasn't really sure what the difference was. After a bit of reading I've come to the conclusion that for HTML option elements .prop() would be more suitable than .attr() when checking the selected state. ...right?

So I started doing some testing:
  1. <select>
  2. <option id="o" value="1" selected></option>
  3. <option value="2"></option>
  4. <option value="3"></option>
  5. </select>

$('#o')
here is selected.
  1. $o = $('#o');
  2. console.log($o.prop('selected'), $o.attr('selected')); /* true, "selected" */

However, when using .prop() to set this to false, it remains true:
  1. $o.prop('selected', false);
  2. console.log(2, $o.prop('selected'), $o.attr('selected')); /* true, "selected" */

.attr()
on the other hand works as expected:
  1. $o.attr('selected', false);
  2. console.log(3, $o.prop('selected'), $o.attr('selected')); /* false, undefined */

Is there a reason .prop() here doesn't set selected to false?