默认文本不会显示在下拉列表中 [英] Default text which won't be shown in drop-down list

问题描述

我有一个select，它最初显示 Select language (选择语言)，直到用户选择一种语言为止.当用户打开选择项时，我不希望它显示选择语言选项，因为它不是实际选项.

I have a select which initially shows Select language until the user selects a language. When the user opens the select, I don't want it to show a Select language option, because it's not an actual option.

我该如何实现?

推荐答案

Kyle的解决方案对我来说效果很好为了避免使用Js和CSS，我进行了研究，但坚持使用HTML. 在要作为标题显示的项目上添加selected值会强制其首先显示为占位符. 像这样:

Kyle's solution worked perfectly fine for me so I made my research in order to avoid any Js and CSS, but just sticking with HTML. Adding a value of selected to the item we want to appear as a header forces it to show in the first place as a placeholder. Something like:

<option selected disabled>Choose here</option>

完整的标记应遵循以下原则:

The complete markup should be along these lines:

<select>
    <option selected disabled>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>

您可以看一下小提琴，结果如下:

You can take a look at this fiddle, and here's the result:

如果您不不希望在用户单击选择框后在选项中列出此类占位符文本，只需添加hidden属性，如下所示:

If you do not want the sort of placeholder text to appear listed in the options once a user clicks on the select box just add the hidden attribute like so:

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

在在此处拨弄和下面的屏幕截图.

这篇关于默认文本不会显示在下拉列表中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！