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

Unable to add hidden attibute to option elements in a select drop down

Hi - I'm able to set the visibility of the parent <select> element, but am having trouble setting visibility properties on specific options of that select element.

This hides the select element:

document.getElementById("selectId").style.visibility = "hidden";

This shows the select element, and tries (but fails...) to hide the first option:

document.getElementById("selectId").style.visibility = "visible";
var option1 = document.getElementById("selectId")[0]; //select option at index 0
console.log(option1); //checking it's there
option1.style.visibility = "hidden"; //<-- this does nothing. In the console I can see that the style has been added (see html from console below), but the element still displays in the browser. 

Console result:

<option value="cornflowerblue" style="visibility: hidden;">Cornflower Blue (JS Puns shirt only)</option>

Any thoughts why the option isn't being hidden?

1 Answer

I'm not sure if this will help, but try .style.display = "none"; instead.