下拉列表中没有空白项的空白 HTML SELECT

Posted 2023-02-16

【中文标题】下拉列表中没有空白项的空白 HTML SELECT

【英文标题】：Blank HTML SELECT without blank item in dropdown list

【发布时间】：2011-09-07 14:35:19

【问题描述】：

如何实现主题？

当我写的时候：

<form>
  <select>
     <option value="0">aaaa</option>
     <option value="1">bbbb</option>
  </select>
</form>

那么默认选择的项目是“aaaa”

当我写的时候：

<form>
  <select>
     <option value=""></option>
     <option value="0">aaaa</option>
     <option value="1">bbbb</option>
  </select>
</form>

那么默认选择的项目是空白的，但是这个空白项目出现在下拉列表中。

如何实现带有隐藏在下拉列表中的默认空白值的 SELECT 标记？

【问题讨论】：

default select option as blank的可能重复

【参考方案1】：

你不能。他们根本不那样工作。下拉菜单必须始终选择其中一个选项。

你可以（虽然我不推荐）观察 change 事件，如果第一个选项为空，则使用 JS 删除它。

【讨论】：

为什么不推荐这种行为？

在很多情况下，您希望用户主动从列表中选择某些内容。我不认为 JS 是最好的方法（尽管它似乎是唯一的方法），但我真的认为应该有一种方法。

【参考方案2】：

您可以使用.prop 将selectedIndex 设置为-1：http://jsfiddle.net/R9auG/。

对于较旧的 jQuery 版本，使用 .attr 而不是 .prop：http://jsfiddle.net/R9auG/71/。

【讨论】：

@IronicMuffin：谢谢；刚刚经过测试，实际上似乎可以在所有主流浏览器上运行。

@zobidafly：感谢编辑；我已经详细说明了。

.attr 在新的 jQuery 版本中会失败。试图变得聪明让我失败了。

【参考方案3】：

<select>
     <option value="" style="display:none;"></option>
     <option value="0">aaaa</option>
     <option value="1">bbbb</option>
  </select>

【讨论】：

ff/chrome - 好的，opera/ie7-9 - 不行，你可以在这里测试（有或没有 js）：jsfiddle.net/R9auG/145 所以我推荐 @pimvdb 的 js-approach

【参考方案4】：

这是一个使用纯 javascript 的简单方法。这是 pimvdb 发布的 jQuery 脚本的原版等价物。你可以测试一下here。

<script type='text/javascript'>
  window.onload = function()
    document.getElementById('id_here').selectedIndex = -1;
  
</script>

.

<select id="id_here">
  <option>aaaa</option>
  <option>bbbb</option>
</select>

确保“id_here”在表单和 JavaScript 中匹配。

【参考方案5】：

只需使用禁用和/或隐藏属性：

<option selected disabled hidden style='display: none' value=''></option>

selected 将此选项设为默认选项。 disabled 使此选项无法点击。 style='display: none' 使此选项不显示在旧版浏览器中。请参阅：Can I Use 隐藏属性的文档。 hidden 使该选项不显示在下拉列表中。

【讨论】：

实际上 IE 11 确实显示了“隐藏”选项。

Webkit 似乎不支持 'hidden' 属性

正如Can I Use 中提到的，hidden 属性实际上是display: none，因此要支持旧版浏览器：<option selected disabled hidden style='display: none' value=''></option>

【参考方案6】：

简单地使用

<option value="" selected disabled>Please select an option...</option>

无需脚本即可在任何地方工作，并允许您同时指导用户。

【参考方案7】：

你可以试试这个sn-p

$("#your-id")[0].selectedIndex = -1

它对我有用。

【讨论】：

最好提供jsfiddle.net 来附上答案，以便提供更清晰的解释。

这假设 OP 正在使用 jQuery。

【参考方案8】：

对于纯粹的 html，@isherwood 有一个很好的解决方案。对于 jQuery，给你的选择下拉一个 ID，然后用 jQuery 选择它：

<form>
  <select id="myDropDown">
    <option value="0">aaaa</option>
    <option value="1">bbbb</option>
  </select>
</form> 

然后使用这个 jQuery 清除页面加载的下拉菜单：

$(document).ready(function() 
    $('#myDropDown').val(''); 
);

或者把它单独放在一个函数中：

$('#myDropDown').val(''); 

完成您正在寻找的内容，如果您需要在不重新加载页面的情况下清空下拉菜单，则可以轻松地将其放入可能会在您的页面上调用的函数中。