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

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

Harsh Khandelwal
Harsh Khandelwal
5,539 Points
Posted by Harsh Khandelwal
Harsh Khandelwal
5,539 Points

Why does the DOM not reflect selected in the options element?

I have the code working fine but I can't still wrap around the fact that even though the selected is set true from the code, it does not reflect in the DOM.

bushaf
bushaf
34,523 Points

try using .attr() method instead of .val()... This is a wild guess though, please paste code if it doesn't solve the problem

Harsh Khandelwal
Harsh Khandelwal
5,539 Points
Harsh Khandelwal
Harsh Khandelwal
5,539 Points

I am using prop() method to set selected as true. Please see the below code:

var $select = $("<select></select>") $("#menu").append($select);

$("#menu a").each(function(){ var $anchor = $(this) var $option = $("<option></option>");

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

$option.val($anchor.attr("href"));

$option.text($anchor.text());

$select.append($option);
});

But this is what I get in the DOM: http://imgur.com/a/n2Uii

I as hoping to see like: <option value="support.html" selected>Support</option>