10

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 ?

Dan Beaulieu
  • 19,406
  • 19
  • 101
  • 135
wener
  • 7,191
  • 6
  • 54
  • 78
  • I cannot select the hidden item in either sample. Why do you have an option there in the first place if you don't need it? Just omit it from the list – knittl Oct 09 '13 at 11:13
  • You can't set `display` to an option field in Chrome and IE. --> http://glidingphenomena.blogspot.ch/2010/06/styledisplaynone-doesnt-work-on-option.html – Michael Schmidt Oct 09 '13 at 11:13
  • @dTDesign But it works under chrome, if the select do not have size attribute. I want to show the match results use the origin select, and do not use DOM op. – wener Oct 09 '13 at 11:23

5 Answers5

8

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.

UPDATE2:

In the current Chrome (v. 70) an Firefox (v. 63) versions, the use of css with "display:none" along with attribute "disabled" in the option tag removes the option from the list and it doesn't appear any more.

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

Thanks to @achecopar for the help

Roberto
  • 8,586
  • 3
  • 42
  • 53
  • The option "Hola" would also be accesible through the keyboard (arrows and typing) even if it is not the first in the list. Chrome v71. I found using both display:none and the disabled attribute works though. – achecopar Dec 14 '18 at 19:43
  • I'm sorry, but I haven't got a Safari browser to test/fix it. If you find out a fix, I can update the answer. – Roberto Feb 11 '20 at 10:25
2

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

Vinay Pratap Singh Bhadauria
  • 9,829
  • 3
  • 28
  • 49
1

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

Community
  • 1
  • 1
acairns
  • 485
  • 4
  • 12
0

Use following jQuery to hide and show under select 

jQuery(selector).toggleOption(true); // show option
jQuery(selector).toggleOption(false); // hide option
Divya Bhaloidiya
  • 5,018
  • 2
  • 25
  • 45
0

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

Arun
  • 257
  • 1
  • 5
  • 22