默认选择选项为空白

Question

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

我不能用这个，

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

因为，为此我将不得不进行验证以处理第一个选项。任何人都可以帮助我实现这个目标而无需将第一个选项实际包含在选择标签中吗？

原文由 Pankaj Parashar 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

也许这会有所帮助

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

原文由 gam6itko 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

您可以使用 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);

原文由 Matschie 发布，翻译遵循 CC BY-SA 3.0 许可协议