HTML选择：如何设置不会显示在下拉列表中的默认文本？ [英] HTML select: how to set default text which won't be shown in drop-down list?

问题描述

我有一个选择，它最初显示选择语言，直到用户选择一种语言。当用户打开选择时，我不希望他们看到选择语言选项，因为它不是一个选项。 方案

如果您不 希望某些占位符文字出现在选项中，只要用户点击选择框，只需添加隐藏属性如下：

 < select> 
<选项已禁用隐藏>选择此处< / option> 
< option value =1>一个< / option> 
< option value =2>两个< / option> 
< option value =3>三< / option> 
< option value =4>四个< / option> 
< option value =5> Five< / option> 
< / select> 
  

检查

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 them to see a Select language option, because it's not an option.

解决方案

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:

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>

Check the fiddle here and the screenshot below.

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