Side navigation
#12557 closed bug (notabug)
Opened September 18, 2012 03:42PM UTC
Closed September 18, 2012 03:56PM UTC
Last modified September 18, 2012 05:22PM UTC
attr('selectedIndex') fails with 1.5.2+
Reported by: | Denis TRUFFAUT | Owned by: | Denis TRUFFAUT |
---|---|---|---|
Priority: | undecided | Milestone: | None |
Component: | unfiled | Version: | 1.8.0 |
Keywords: | Cc: | ||
Blocked by: | Blocking: |
Description
Tested on 1.8.1
It is a regression since it was working with 1.5.2.
Test : http://jsfiddle.net/G9U6N/
Tags : JQuery select attr selectedIndex fail bug list change bind index
Test summary :
/**********************************************/
/* attr('selectedIndex') fail test */
/* ------------------------------------------ */
/* Scenario is a beautiful CSS list binded */
/* on an ugly select. Click on list elements */
/* (1,2,3) to attempt to trigger the select */
/* ------------------------------------------ */
/* .fail works with 1.5 but fails with 1.5+ */
/**********************************************/
$('.fail').click(function() {
/* This line fails */
$('#my_select').attr('selectedIndex',parseInt($(this).html()) - 1);
$('#my_select').trigger('change');
return false;
});
$('.ok').click(function() {
document.getElementById('my_select').selectedIndex = parseInt($(this).html()) - 1;
$('#my_select').trigger('change');
return false;
});
<select id="my_select">
<option value='1'>Option 1</option>
<option value='2'>Option 2</option>
<option value='3'>Option 3</option>
</select>
<br/>
<table border=1 cellpadding=5 cellspacing=0>
<tr>
<td width=100 align=center>Fail</td>
<td width=100 align=center>OK</td>
</tr>
<tr>
<td align=center>
<a class="fail" href="#">1</a><br/>
<a class="fail" href="#">2</a><br/>
<a class="fail" href="#">3</a><br/>
</td>
<td align=center>
<a class="ok" href="#">1</a><br/>
<a class="ok" href="#">2</a><br/>
<a class="ok" href="#">3</a><br/>
</td>
</tr>
</table>
Attachments (0)
Change History (3)
Changed September 18, 2012 03:51PM UTC by comment:1
owner: | → Denis TRUFFAUT |
---|---|
status: | new → pending |
Changed September 18, 2012 03:56PM UTC by comment:2
resolution: | → notabug |
---|---|
status: | pending → closed |
Yes, in older jQuery we mixed up the concepts of attributes and properties which we fixed in 1.6. There isn't a selectedIndex
attribute:
http://www.w3.org/TR/1998/REC-html40-19980424/interact/forms.html#edef-SELECT
However there is a property by that name so you want .prop()
which retrieves properties. selectedIndex
is a property of the select
element.
http://www.w3.org/TR/2000/WD-DOM-Level-1-20000929/level-one-html.html#ID-94282980
Note that the DOM spec calls them "attributes" but they're properties. So it's understandable that everyone gets confused. But they're definitely different things, which is why there is now .attr()
and .prop()
.
Changed September 18, 2012 05:22PM UTC by comment:3
When reading the spec on the w3 website, you can differentiate what we refer to as attributes and properties by looking for the names content attributes (attributes) and IDL (Interface Definition Language) attributes (we call these properties). Both are called "attributes" in the spec, but they are clearly differentiated by what kind of "attribute" they mean. content -> .attr()
, IDL -> .prop()
.
Thanks for taking the time to contribute to the jQuery project! Please provide a complete reduced test case on jsFiddle to help us assess your ticket!
Additionally, be sure to test against the "jQuery (edge)" version to ensure the issue still exists. To get you started, use this boilerplate: http://jsfiddle.net/FrKyN/
Open the link and click to "Fork" (in the top menu) to begin.