显示：无选项不起作用

wener 发表于 Dev

星期五

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;
}

size属性将影响显示和可见性，这会发生什么？

如何隐藏选择中具有size属性的选项？

罗伯托

查看更新部分

我认为您不能仅使用CSS来实现所有浏览器，而需要一些JS代码，前面的问题非常相似：

如何使用CSS隐藏<select>菜单中的<option>？

在Chrome（v。30）中，“ display：none”不起作用，但是在Firefox（v。24）中，“ display：none”选项未出现在列表中。

UPDATE2：

在当前的Chrome（v。70）和Firefox（v。63）版本中，在选项标签中使用带有“ display：none”和“ disabled”属性的css将从列表中删除该选项，并且该选项不会出现还有。

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

感谢@achecopar的帮助

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。