1

While answering another question I came across this weird bug. A quick search has not found an existing question, so here goes:

JSFiddle: http://jsfiddle.net/TrueBlueAussie/93D3h/4/

<select>
    <option>Item1</option>
    <option>Item2</option>
    <option>Item3</option>
    <option class="hidden">Item4</option>
    <option class="hidden">Item5</option>
</select>

CSS:

.hidden {
    display: none;
}

Q: Why is Item5 always shown, even though it is styled as hidden? Item4 is not visible. Note: I am testing this in the latest version of Chrome.

Update:

Different people are getting different results on different browsers. The following (from answer below) works on Chrome but not on the latest IE (both Item4 and Item5 are shown):

.hidden {
    visibility: hidden;
}

Turns out this problem has been hit before (no surprise): How to hide a <option> in a <select> menu with CSS? but the surprising thing is that browsers do not support removing options with styling. Go figure!

Community
  • 1
  • 1
iCollect.it Ltd
  • 92,391
  • 25
  • 181
  • 202

3 Answers3

3

Styling OPTION elements using CSS is not a reliable solution because user agents implement this very differently and non-standard. I wouldn’t call this a bug, because there is no style attribute definition in the specs for the OPTION element: http://www.w3.org/TR/html401/interact/forms.html#h-17.6

You could use the disabled property instead:

<select>
    <option>Item1</option>
    <option>Item2</option>
    <option>Item3</option>
    <option disabled>Item4</option>
    <option disabled>Item5</option>
</select>

And/or use JavaScript to manipulate the DOM. A pretty good start would be to target the disabled elements for semantic fallback:

[].forEach.call(document.querySelectorAll('*[disabled]'), function(element) {
  element.parentNode.removeChild(element)
})

Demo: http://jsfiddle.net/93D3h/15/

Or use jQuery: $('[disabled]').remove()

Update: Based on the comments and the new requirements, I made a small toggle demo here using data attributes instead: http://jsfiddle.net/95Ed5/

David Hellsing
  • 106,495
  • 44
  • 176
  • 212
  • That only greys them out. The original question I found this one only wanted them hidden: http://stackoverflow.com/questions/25115392/javascript-hide-show-items-in-dropdown-list/25115571#25115571 – iCollect.it Ltd Aug 04 '14 at 09:59
  • @TrueBlueAussie The visual appearance of `disabled` is not enforced, but at least it’s semantic. I’m just referring to the specs here, If `disabled` is not an option for you, use DOM manipulation. CSS or inline styles are not standard and therefor unreliable, that’s my point. – David Hellsing Aug 04 '14 at 10:02
  • Correct: Inline styling does not work either. According to question Kheema Pandey found here: http://stackoverflow.com/questions/9234830/how-to-hide-a-option-in-a-select-menu-with-css this is a known flaw in browsers. – iCollect.it Ltd Aug 04 '14 at 10:05
  • @TrueBlueAussie Exactly, but I wouldn’t call it a *flaw*, because the specs doesn’t include the `style` attribute for the `OPTION` element at all. So it’s basically up to each user agent to do their own implementation, wich also seems to have OS variations as well. – David Hellsing Aug 04 '14 at 10:08
  • OK, if not a flaw I would call not being able to style `options` a *serious design deficiency* :) – iCollect.it Ltd Aug 04 '14 at 10:09
  • @TrueBlueAussie maybe so but then you would have to blame the specs. Styling form controls in general has always been troublesome, and it doesn’t get easier with all the new emerging devices. I would stick to standars here, you really don’t want to mess with usability when it comes to forms. – David Hellsing Aug 04 '14 at 10:13
  • The original bug came from answering this: http://stackoverflow.com/questions/25115392/javascript-hide-show-items-in-dropdown-list Which needs the hidden items to be shown when a "more" option was clicked, but I will accept your updated answer as correct for this question (if nobody provides a better answer soon). – iCollect.it Ltd Aug 04 '14 at 10:22
  • @TrueBlueAussie I made a demo with a toggle function here: http://jsfiddle.net/95Ed5/ – David Hellsing Aug 04 '14 at 10:39
1

try this code

.hidden {
    visibility: hidden;
}

Designed to display or hide the element, including a frame around it and background. When you hide an element, although it is not displayed at a place that takes the element remains on him. If the intended output of different elements in the same place on the screen to bypass this feature should use absolute positioning, or use the property display.

Alex Wilson
  • 2,421
  • 11
  • 13
  • Scratch that... IE still shows Item4 and Item5... This is the strangest thing – iCollect.it Ltd Aug 04 '14 at 09:55
  • Turns out you cannot *style-out* `select` `option`s consistently across browsers. You need to dynamically alter the list content instead. Reference: http://stackoverflow.com/questions/9234830/how-to-hide-a-option-in-a-select-menu-with-css – iCollect.it Ltd Aug 04 '14 at 10:18
1

Your best shot (cross browser solution) would be to use jquery to store the hidden values. It can be done it regular javascript too.

var array = $(".hidden");
$(".hidden").remove();

And then when you need them you get them in array

Update

Here is the updated fiddle : http://jsfiddle.net/93D3h/16/
I added two buttons to show what you could do with the stored hidden values (add them back to the select, or remove them)

singe3
  • 2,065
  • 4
  • 30
  • 48
  • Can you please clarify your answer and provide a JSFiddle to demonstrate? You are actually very close to the best solution, but it needs explaining clearly. – iCollect.it Ltd Aug 04 '14 at 10:18
  • @TrueBlueAussie Updated answer with a fiddle – singe3 Aug 04 '14 at 11:08
  • +1 for the fiddle. Modifying the DOM is the correct solution. The original question I was answering when I found this problem is here: http://stackoverflow.com/questions/25115392/javascript-hide-show-items-in-dropdown-list/25115571#25115571 I must keep David's answer as the "answer" as he also added this type of functionality. – iCollect.it Ltd Aug 04 '14 at 11:13