Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML jQuery Basics (2014) Creating a Mobile Drop Down Menu Perform: Part 3

James Vaughan
PLUS
James Vaughan
Courses Plus Student 4,462 Points
Posted by James Vaughan
James Vaughan
Courses Plus Student 4,462 Points

<option> selected not shown in developer console.

In the app.js code we have this:

if($anchor.parent().hasClass("selected")) {
  $option.prop("selected", true);
}

Which is functional within the browser. However, when you inspect the selected attribute for the option element isn't set. I added it using .attr and an attribute of selected with the content 'selected'. This also works, and is shown in the inspector. It's not shown in the video, but some students may stumble on it or question it not working - as I did without actually testing it in the browser.

Shariq Shaikh
Shariq Shaikh
13,945 Points
Shariq Shaikh
Shariq Shaikh
13,945 Points

So your saying that if you open up developer tools and inspect the selected option you can't find where the "selected" property is set to true?

James Vaughan
James Vaughan
Courses Plus Student 4,462 Points
James Vaughan
James Vaughan
Courses Plus Student 4,462 Points

If you set 'selected' using the code above, then when you inspect the page (and resize it accordingly) the selected option does not have the 'selected' attribute (all of the options are the same). However, if you add it as follows:

$option.attr("selected", "selected");

Then when inspected it does have the relevant attributes.

Functionally both methods work. I'm raising that if you follow the instructions, then regardless of it working the actual page source doesn't reflect what is actually happening (as opposed to using (attr).

1 Answer

Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

According to the .prop() page of the jQuery API documentation:

the most important concept to remember about the checked attribute is that it does not correspond to the checked property. The attribute actually corresponds to the defaultChecked property and should be used only to set the initial value of the checkbox. The checked attribute value does not change with the state of the checkbox, while the checked property does. Therefore, the cross-browser-compatible way to determine if a checkbox is checked is to use the property:

if ( elem.checked )
if ( $( elem ).prop( "checked" ) )
if ( $( elem ).is( ":checked" ) )

The same is true for other dynamic attributes, such as selected and value.

So you're correct, in that .attr() should have been used here, since the code is setting the initial selected value of the dropdown menu. .prop() is working as intended, which is to change the property, not the attribute visible in the source code/inspector.

If the dropdown menu was being used to change the state of elements on the same page, then it would need to set and get the selected property to determine what action to take.