显示：无选项不工作 [英] display:none doesn't work for option
问题描述
演示这里
HTML：
显示：无< b>无效< / b>，隐藏可以< b>未选择< / 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>，隐藏的< b>可以选择< / b>。
< 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：
code> select {width：50px;}
[value = C] {
display：none;
}
/ *将保存位置* /
[value = B] {
visibility：hidden;
}
size属性会影响显示和可见性， / p>
如何在select中隐藏具有 size 属性的选项？
查看更新部分
我想你不能CSS所有浏览器，你需要一些JS代码，有一个以前的问题非常相似：
如何隐藏< option>在< select> （v。30）display：none不工作，但是在Firefox（v。24）中它工作，display：none的选项不会出现在列表中。
UPDATE：
在当前的Chrome（v.43）Firefox（v。38.0.1）版本中，使用带有display：none的css会从列表中删除该选项，但不是完美在此示例中：
< html>< body>
< select>
< option style =display：none> Hola< / option>
< option> Hello< / option>
< option> Ciao< / option>
< / select>
< / body>< / html>
当您展开comboBox时，不会出现选项Hola，也就是说，选择，但当您首次加载网页时，它会显示为默认选择选项。
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 ?
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.
这篇关于显示：无选项不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
