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

Posted by Dekin O'Sullivan
Dekin O'Sullivan
10,749 Points

$option is not being appended to $select

Hello, I am transposing this tutorial to my website project. The only difference is that instead of a simple "div" element I use a "nav" element. All the rest is the same ("li" elements, id=menu, etc.). When I input exactly the same code though, all I get is the select box but with nothing in it. When I inspect the code, <select></select> is empty. In other words, <option></option> items have not been appended... Could someone please help?

Here is my html:

<header id="header_index">
      <a href="index.html" id="logo">
        <h1>Rothorn Partners</h1>
      </a>
      <nav id="menu">
        <ul>
          <li><a href="index.html" class="selected">Home</a></li>
          <li><a href="partners.html">Partners</a></li>
          <li><a href="strategy.html">Strategy</a></li>
          <li><a href="philosophy.html">Philosophy</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
      </nav>
    </header>

And here is my JQuery:

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

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

  $option.val($anchor.attr("href"));
  $option.text($anchor.text());
  $select.append($option);
});

Many thanks

John Coolidge
John Coolidge
12,614 Points

You'll need to redo your code so that we can read it properly.

After the three backticks, which you have, you need to add the language that you are using. So after the first three type javascript then at the end of your code use three more backticks. Please do the same for the HTML except instead of typing javascript after the three backticks, type HTML instead.

John

Dekin O'Sullivan
Dekin O'Sullivan
10,749 Points

Hi John,

For some reason nothing is working... :( As you can see above my back ticks don't even show for the html part and don't work for the javascript part...

John Coolidge
John Coolidge
12,614 Points

Try putting the backticks on their own line and not inline with other text. You have text before both of your HTML and Javascript backticks. This may be causing the errors we are seeing.

I usually place the backticks and the language name together on its own line, with code starting on a new line after the first set of backticks and I put the last set of backticks on their own line at the end also.

Like so:

BacktickBacktickBacktick (name of language)

All my code goes here.

BacktickBacktickBacktick

John

Dekin O'Sullivan
Dekin O'Sullivan
10,749 Points

Thank you John, unfortunately that is indeed how I did it (one line only for the backticks and language name) but nothing works... I will open a ticket with the help desk and see if they can fix this... It may have to do with the fact that I am in Europe using a Swiss keyboard...

Jacob Mishkin
Jacob Mishkin
23,118 Points

edited: code formatting.

John Coolidge
John Coolidge
12,614 Points

Dekin,

I've copied and pasted your code into my text editor and I've got no problems with the select box not appearing. I first thought that you might not have the Jquery library in a script tag but upon inspection, that wouldn't make the select box appear with nothing inside it. The select box wouldn't appear at all. I'm not sure what the issue is since I've copied and pasted your text as you have it above.

Dekin O'Sullivan
Dekin O'Sullivan
10,749 Points

Jacob, many thanks for fixing my display problem: how did you do it??

John, it is so strange that this code works for you and not me: here is what I had to do to make it work: instead of $("#menu").append($select); I had to put : $("#menu ul").append($select); With that fix it works fine but my "select" box is now part of the unordered list instead of being an independant nav element. This could spell trouble later in my project when I will want the other ul items to disappear on small screen sizes... Or maybe i could just hide the "li" elements so only the "select" element shows?

Mmh, strange how code works sometimes... Do you have any idea why this could be happening to me?

Many thanks

John Coolidge
John Coolidge
12,614 Points

What browser are you working in? I'm wondering if you are using IE, which can be problematic. And if you're running Jquery 2.X instead of Jquery 1.X, it won't work with IE 6, 7, and 8.

If you are using IE 6, 7, or 8 make sure you get the correct link to the JQuery file. You want Jquery 1.X, not 2.X.

John

Dekin O'Sullivan
Dekin O'Sullivan
10,749 Points

Hi John, I am actually using Chrome Version 47.0.2526.106 m, which is apparently the latest to date, and I am using the following JQuery version : //code.jquery.com/jquery-1.11.3.min.js, which seems to be the 1.X you are referring to... So I really don't know where the issue could come from...

Jacob Mishkin
Jacob Mishkin
23,118 Points

to post code on the forum, take a look at the Markdown Cheatsheet just above the post button. It will tellyou how to post code into the forum.

1 Answer

Dekin O'Sullivan
Dekin O'Sullivan
10,749 Points
Dekin O'Sullivan
Dekin O'Sullivan
10,749 Points

Many thanks for the repost rdaniels. Even in your reposting there are bits of code the message omitted that don't show up in the picture (empty brackets)... No, it is indeed $select because that is the name of the variable.

Thanks!