Geek Answers Handbook

Why is the last selection option always displayed, even if specified

Answering another question, I came across this strange mistake. A quick search did not find an existing question, so:

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 it Item5always displayed, even if it is styled as hidden? Item4not displayed. Note. I am testing this in the latest version of Chrome.

Update:

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

.hidden {
    visibility: hidden;
}

, ( ): <option> <select> CSS?, , . !

+1
3

OPTION CSS , - . Wouldnt , style OPTION : http://www.w3.org/TR/html401/interact/forms.html#h-17.6

disabled:

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

/ JavaScript DOM. disabled :

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

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

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

Update: , , : http://jsfiddle.net/95Ed5/

+3

.hidden {
    visibility: hidden;
}

, . , , . .

+1

(- ) jquery . javascript.

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

, , array

: http://jsfiddle.net/93D3h/16/
, , ( )

+1
source

More articles:


All Articles