Why did I have to add $select.show().

It makes sense that you would need to call show on a hidden element to reveal it.

You might need to show specifically where in the code you had to add this line to make it possible to analyze the issue. There's a good chance this issue is caused by the HTML and/or CSS components setting the initial state to not be visible.

It might be particularly helpful if you mark your change with comments and then make a snapshot of your workspace and post the link to it here.

UPDATE: Now that I've seen the CSS code, you might want to change it if you don't need these items to be invisible initially:

@media (min-width: 568px) { #menu button { display:none; } }  /* removed "#menu select, " */

As i can't copy on workspace, I couldn't paste from my local computer so I posted it here.

var $select = $("<select></select>");
$("#menu").append($select);
console.log("menu added?");

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

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

    $select.append($option);







});

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

$button.click(function() {
    window.location = $select.val();


});

//before i added these it wouldn't show
$select.show();
$button.show();

I don't use workspaces. I prefer to code with vim. Anyway i figured it out. I was using the final version of the css.

@media (min-width: 320px) and (max-width: 568px) { #menu ul { display:none; } }

@media (min-width: 568px) { #menu select, #menu button { display:none; } }

I guess these two rules were responsible.