display:none doesn't work for option

Problem

Demo here

HTML:

display:none <b>not works</b>,the hidden can <b>not select</b>.<br>
<select size="5">
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
    <option value="D">D</option>
    <option value="E">E</option>
    <option value="F">F</option>
    <option value="G">G</option>
    <option value="H">H</option>
    <option value="I">I</option>
</select><br>

display:none <b>works</b>,the hidden <b>can select</b>.<br>
<select>
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
    <option value="D">D</option>
    <option value="E">E</option>
    <option value="F">F</option>
    <option value="G">G</option>
    <option value="H">H</option>
    <option value="I">I</option>
</select>

CSS:

select{width:50px;}

[value=C]{
    display: none;
}
/* will hold the position */ 
[value=B]{
    visibility: hidden;
}

The size attribute will affect the display and visibility, what happen to this ?

How can I hide the option in select which has a size attribute ?

Problem courtesy of: wener

Solution

See updated section

I think you can not do that only with CSS for all browsers you'll need some JS code, there is a previous question quite similar:

How to hide a <option> in a <select> menu with CSS?

In Chrome (v. 30) "display:none" doesn't work, however in Firefox (v. 24) It works, the option with "display:none" doesn't appear in the list.

UPDATE:

In the current Chrome (v. 43) an Firefox (v. 38.0.1) versions, the use of css with "display:none" removes the option from the list but is not "perfect", for instance, in this example:

<html><body>
    <select>
      <option style="display:none">Hola</option>
      <option>Hello</option>
      <option>Ciao</option>
    </select>
</body></html>

The option "Hola" doesn't appear when you expand the comboBox, that is, It cannot be selected, but it appears as default selected option when you load the page for the first time.

Solution courtesy of: Roberto

Discussion

There is a technique for hiding options within a select in this post: How to hide a <option> in a <select> menu with CSS?

Discussion courtesy of: acairns

Use following jQuery to hide and show under select

jQuery(selector).toggleOption(true); // show option
jQuery(selector).toggleOption(false); // hide option
Discussion courtesy of: Divya Bhalodiya

is you need this...

<select>
    <option value="A">A</option>
    <option disabled value="B">B</option>
    <option value="C">C</option>
    <option disabled value="D">D</option>
    <option value="E">E</option>
    <option value="F">F</option>
    <option value="G">G</option>
    <option value="H">H</option>
    <option value="I">I</option>
</select>

the disable value are not select-able.

if you want to hide go here..

http://jsbin.com/anoci

Discussion courtesy of: Arun Maddheshia

The property Display:none wont work on the options tag so you have only two options as work around

1. Either disable then with disabled="disabled".
2. Remove the options you don't want to see and insert them again when needed.

you may be able to find some other work around too, but i don't think it will be consistent in all the browsers

Discussion courtesy of: Vinay Singh

This recipe can be found in it's original form on Stack Over Flow.