默认选择选项为空白

html HTML

EvaA

2020-03-20

我有一个很奇怪的要求，其中要求我默认在HTML的下拉菜单中没有选择任何选项。然而，

我不能用这个

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

因为，为此，我将必须进行验证以处理第一个选项。有人可以在没有将第一个选项作为select标签的一部分的情况下帮助我实现此目标吗？

第2483篇《默认选择选项为空白》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共13个回答
小哥宝儿 2020.03.20

尝试这个：

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

在HTML5中验证。与requiredselect元素中的attribute一起使用。可以重新选择。适用于Google Chrome 45，Internet Explorer 11，Edge，Firefox 41。

凯西里 2020.03.20

为了显示，请在下拉列表中选择一个值，并在选择某个值后将其隐藏。请使用以下代码。

它还将支持所需的验证。

<select class="form-control" required>
<option disabled selected value style="display:none;">--Please select a value</option>
              <option >Data 1</option>
              <option >Data 2</option>
              <option >Data 3</option>
</select>

Stafan古一 2020.03.20

我正在使用Laravel 5框架，@ Gambi的回答也对我有用，但是对我的项目进行了一些更改。

我在数据库表中有选项值，并且将它们与foreach语句一起使用。但是在声明之前，我添加了一个带有@Gambit建议设置的选项，并且它起作用了。

我的例子是：

@isset($keys)
  <select>
    <option  disabled selected value></option>
    @foreach($keys as $key)
      <option>{{$key->value)</option>
    @endforeach
  </select>
@endisset

我希望这也会对某人有所帮助。保持良好的工作！

宝儿小胖 2020.03.20

尝试这个：

<h2>Favorite color</h2>
<select name="color">
<option value=""></option>
<option>Pink</option>
<option>Red</option>
<option>Blue</option>
</select>

下拉菜单中的第一个选项为空白。

Gil 2020.03.20

没有HTML解决方案。根据HTML 4.01规范，如果所有option元素都不具有selected属性，则浏览器的行为是不确定的，并且在实践中，浏览器的作用是使第一个选项被预选。

解决方法是，可以用select一组input type=radio元素（具有相同name属性）替换该元素。尽管外观和用户界面不同，但这会创建相同类型的控件。如果所有input type=radio元素都不具有checked属性，则在大多数现代浏览器中最初都不会选择它们。

Pro小胖 2020.03.20

只是一句话：

某些Safari浏览器似乎既不尊重“隐藏”属性也不尊重样式设置“ display：none”（在MacOS 10.12.6下使用Safari 12.1进行了测试）。如果没有明确的占位符文本，这些浏览器只会在选项列表中显示空的第一行。因此，始终为该“虚拟”条目提供一些解释性文本可能会很有用：

<option hidden disabled selected value>(select an option)</option>

由于使用了“禁用”属性，因此无论如何都不会主动选择它。

神奇乐 2020.03.20

我发现它真的很有趣，因为不久前我才经历过同样的事情。但是，我在Internet上遇到了有关此解决方案的示例。

事不宜迟，请参见下面的代码片段：

<select>
 <option value data-isdefault="true">--Choose one Option--</option>
 <option>Option 1</option>
 <option>Option 2</option>
 <option>Option 3</option>
</select>

这样，它将随时保持不可提交但可选的状态。用户界面更方便，用户体验更出色。

好了，我希望对您有所帮助。干杯!

泡芙 2020.03.20

这应该有帮助：

https://www.w3schools.com/tags/att_select_required.asp

 <form>
 <select required>
  <option value="">None</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
<button type="submit">Submit</button>
</form>

小小 2020.03.20

您可以使用Javascript实现此目的。尝试以下代码：

的HTML

<select id="myDropdown">      
    <option>Option 1</option>     
    <option>Option 2</option>     
    <option>Option 3</option>     
</select>

JS

document.getElementById("myDropdown").selectedIndex = -1;

或JQuery

$("#myDropdown").prop("selectedIndex", -1);
小胖Gil 2020.03.20 
<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>

在这种情况下，您可以避免自定义验证。

Gil 2020.03.20

仅使用CSS的解决方案：

答：内联CSS

<select>
    <option style="display:none;"></option>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
</select>

B：CSS样式表

如果手头有CSS文件，则可以option使用以下命令定位第一个文件：

select.first-opt-hidden option:first-of-type {
  display:none;
}
<select class="first-opt-hidden">
    <option></option>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
</select>

西里神奇 2020.03.20

今天（2015-02-25）

这是有效的HTML5，并将空白（不是空格）发送到服务器：

<option label=" "></option>

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

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

以下代码今天也通过了验证，但是大多数浏览器的服务器也传递了某种空格字符（可能是不希望的），其他浏览器也传递了空格（Chrome40 / Linux传递了空格）：

<option>&#160;</option>

以前（2013-08-02）

根据我的注释，上面显示的选项标签内的非空格实体在2013年产生了以下错误：

错误：W3C标记有效期服务（公共）：select元素的第一个子选项元素具有必需的属性，但没有multiple属性，其大小为1，必须具有空值属性，或者没有文本内容。

当时，常规空间是有效的XHTML4，并从每个浏览器向服务器发送了一个空格（不是空格）：

<option> </option>

未来

如果规范经过更新以明确允许使用空白选项，那将令我感到高兴。最好使用最简短的语法。以下任何一种都将是很棒的：

<option />
<option></option>

测试文件

<!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>
樱小胖Mandy 2020.03.20

也许这会有所帮助

<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 --将默认显示。但是，如果您选择一个选项，则将无法再次选择它。

您也可以通过添加一个空白来隐藏它 option

<option style="display:none">

因此它将不再显示在列表中。

选项2

如果您不想编写CSS并期望与上述解决方案具有相同的行为，请使用：

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

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android