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:
- <select>
- <option id="o" value="1" selected></option>
- <option value="2"></option>
- <option value="3"></option>
- </select>
$('#o') here is selected.
- $o = $('#o');
- console.log($o.prop('selected'), $o.attr('selected')); /* true, "selected" */
However, when using
.prop() to set this to false, it remains true:
- $o.prop('selected', false);
- console.log(2, $o.prop('selected'), $o.attr('selected')); /* true, "selected" */
.attr() on the other hand works as expected:
- $o.attr('selected', false);
- console.log(3, $o.prop('selected'), $o.attr('selected')); /* false, undefined */
Is there a reason
.prop() here doesn't set selected to false?