单击下拉列表时，如何隐藏默认<select> <option>？</option> </select>

Question

我想要一个<select>元素，默认选择的选项是“____”。换句话说，空白。

当关注下拉列表时，我希望“____”选项不在可以选择的选项中。这样，用户必须选择“____”以外的其他选项。

这有意义吗？

插图

闭：

打开的：

如您所见，选择“___”选项时不在列表中。这是我期望的最终结果。

我尝试使用onFocus事件来删除选项，但这只是取消了元素，并将默认选项替换为另一个。

Answer 1

您可以利用HTML中的hidden属性。试试这个例子

<select>
    <option selected disabled hidden>Choose here</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <option value="4">Four</option>
    <option value="5">Five</option>
</select>

请查看此fiddle或以下屏幕截图。

点击之前：

点击后：

Answer 2

要隐藏默认选项，允许其他人显示，有几种方法可以使用。

很遗憾，您无法在所有浏览器中隐藏选项元素。同样，display:none;无法在options上的所有浏览器中生效...

过去当我需要这样做时，我已经设置了他们的禁用属性，就像这样......

$('option').prop('disabled', true);

然后我使用了这个CSS的浏览器支持它的隐藏...

select option[disabled] {
    display: none;
}

Answer 3

CSS 是您的朋友，请为您要隐藏的选项设置display:none。

<select>
<option style="display:none" selected="selected" value=""> </option>
<option value="visi1">Visible1</option>
<option value="visi2">Visible2</option>
<option value="visi3">Visible3</option>
</select>

这里有一个额外的jQuery，可以确保任何选择的第一个选项是不可见的：

$('select:first-child').css({display:none;});