默认选择选项为空白

最新推荐文章于 2023-05-20 11:03:11 发布

CHCH998

最新推荐文章于 2023-05-20 11:03:11 发布

阅读量508

点赞数

文章标签： html

原文链接：https://oldbug.net/q/a6ge/default-select-option-as-blank

版权

本文翻译自：default select option as blank

I have a very weird requirement, wherein I am required to have no option selected by default in drop down menu in HTML. 我有一个很奇怪的要求，其中要求我默认在HTML的下拉菜单中没有选择任何选项。 However, 然而，

I cannot use this, 我不能用这个

 <select> <option></option> <option>Option 1</option> <option>Option 2</option> <option>Option 3</option> </select>

Because, for this I will have to do validation to handle the first option. 因为，为此，我必须进行验证才能处理第一个选项。 Can anyone help me in achieving this target without actually including the first option as part of the select tag? 有人可以在没有将第一个选项实际包含在select标签中的情况下帮助我实现此目标吗？

#1楼

参考：https://stackoom.com/question/a6ge/默认选择选项为空白

#2楼

Maybe this will be helpful 也许这会有所帮助

<select>
    <option disabled selected value> -- select an option -- </option>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
</select>

-- select an option -- Will be displayed by default. -- select an option --将默认显示。 But if you choose an option,you will not be able select it back. 但是，如果您选择一个选项，则将无法再次选择它。

You can also hide it using by adding an empty option 您还可以通过添加一个空option来隐藏它

<option style="display:none">

so it won't show up in the list anymore. 因此它将不再显示在列表中。

Option 2 选项2

If you don't want to write CSS and expect the same behaviour of the solution above, just use: 如果您不想编写CSS并期望与上述解决方案具有相同的行为，请使用：

<option hidden disabled selected value> -- select an option -- </option>

#3楼

Today (2015-02-25) 今天（2015-02-25）

This is valid HTML5 and sends a blank (not a space) to the server: 这是有效的HTML5，并将空白（不是空格）发送到服务器：

<option label=" "></option>

Verified validity on http://validator.w3.org/check 在http://validator.w3.org/check上验证的有效性

Verified behavior with Win7(IE11 IE10 IE9 IE8 FF35 Safari5.1) Ubuntu14.10(Chrome40, FF35) OSX_Yosemite(Safari8, Chrome40) Android(Samsung-Galaxy-S5) Win7（IE11 IE10 IE9 IE8 FF35 Safari5.1）的验证行为Ubuntu14.10（Chrome40，FF35）OSX_Yosemite（Safari8，Chrome40）Android（三星-Galaxy-S5）

The following also passes validation today , but passes some sort of space character too the server from most browsers (probably not desirable) and a blank on others (Chrome40/Linux passes a blank): 下面的代码今天也通过了验证，但是从大多数浏览器的服务器（也可能不是）也传递了某种空格字符（在其他浏览器中传递了空格）（Chrome40 / Linux传递了一个空格）：

<option>&#160;</option>

Previously (2013-08-02) 以前（2013-08-02）

According to my notes, the non-breaking-space entity inside the option tags shown above produced the following error in 2013: 根据我的注释，上面显示的选项标签内的非空格实体在2013年产生了以下错误：

Error: W3C Markup Validaton Service (Public): The first child option element of a select element with a required attribute and without a multiple attribute, and whose size is 1, must have either an empty value attribute, or must have no text content. 错误：W3C标记有效期服务（公共）：select元素的第一个子选项元素具有必需的属性，但没有multiple属性，其大小为1，必须具有空值属性，或者没有文本内容。

At that time, a regular space was valid XHTML4 and sent a blank (not a space) to the server from every browser: 当时，常规空间是有效的XHTML4，并从每个浏览器向服务器发送了一个空格（不是空格）：

<option> </option>

Future 未来

It would make my heart glad if the spec was updated to explicitly allow a blank option. 如果规范经过更新以明确允许使用空白选项，那将令我感到高兴。 Preferably using the briefest syntax. 最好使用最简短的语法。 Either of the following would be great: 以下任何一种都将是很棒的：

<option />
<option></option>

Test File 测试文件

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>Test</title>
</head>
<body>
  <form action="index.html" method="post">
    <select name="sel">
      <option label=" "></option>
    </select>
  </form>
</body>
</html>

#4楼

Try this: 尝试这个：

<select>
    <option value="">&nbsp;
    <option>Option 1
    <option>Option 2
    <option>Option 3
</select>

Validates in HTML5. 在HTML5中验证。 Works with required attribute in select element. 与select元素中的required属性一起required 。 Can be re-selected. 可以重新选择。 Works in Google Chrome 45, Internet Explorer 11, Edge, Firefox 41. 适用于Google Chrome 45，Internet Explorer 11，Edge，Firefox 41。

#5楼

 <td><b>Ação da atividade:</b><br> <select style='align:left; width:100%;' id='cbxTipoSFA' name='cbxTipoSFA'> <option hidden selected>Selecione uma opção</option> <option value='Instalação'>Instalação</option> <option value='Solicitação'>Solicitação</option> <option value='Retirada'>Retirada</option></select> </td>

Just put "hidden" on option you want to hide on dropdown list. 只需在要隐藏在下拉列表中的选项上加上“隐藏”即可。

#6楼

<select required>
  <option value="" disabled selected>None</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

You can avoid custom validation in this case. 在这种情况下，您可以避免自定义验证。