Why Is Last Select Option Always Shown, Even When Styled Out

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

Solution 1:

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><optiondisabled>Item4</option><optiondisabled>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/

Solution 2:

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.

Solution 3:

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)