当点击下拉菜单时，如何隐藏默认的 ?

I want to have a <select> element that's default chosen option is "____". In other word's, blank.

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

When the drop-down is focused, I want the "____" option to not be in the options that can be selected. That way the user has to choose something other than "____" as their option.

当关注下拉菜单时，我希望“____”选项不在可选择的选项中。这样，用户必须选择“____”以外的内容作为他们的选项。

Does that make sense?

这说得通吗?

Illustrations

Closed:

Opened:

As you can see, the option "___" is not in the list when it is being selected. That is my desired end result.

如您所见，选项“___”在被选中时不在列表中。这就是我想要的最终结果。

I've tried using onFocus events to remove options, but that just unfocuses the element, and replaces the default option with another one.

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

3 个解决方案

#1

To hide the default option, allowing the others to show, there are a few ways to go.

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

Unfortunately, you can't hide option elements in all browsers. Again, display:none; does not work in all browsers on options ...

不幸的是，您不能在所有浏览器中隐藏选项元素。再一次,显示:没有;不能在所有浏览器中使用选项……

In the past when I have needed to do this, I have set their disabled attribute, like so...

在过去，当我需要这样做时，我设置了他们的禁用属性，比如……

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

I've then used the hiding where it is supported in browsers using this piece of CSS...

然后我使用了隐藏，在浏览器支持的地方使用这段CSS…

select option[disabled] {
    display: none;
}

#2

You can leverage the hidden attribute in HTML. Try with this example

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

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

Check this fiddle or the screenshots below.

检查这个小提琴或下面的截图。

Before clicking:

之前点击:

After clicking:

在点击:

#3

CSS is your friend, set display:none for the option you want to hide.

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>

Here's an extra with jQuery that will ensure the first option of any select is invisible:

下面是jQuery提供的一个额外选项，它将确保任何选择的第一个选项都是不可见的:

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