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

【问题标题】：Blank HTML SELECT without blank item in dropdown list下拉列表中没有空白项的空白 HTML SELECT
【发布时间】：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 标记？

【问题讨论】：

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案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>

【讨论】：

实际上 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

它对我有用。

【讨论】：

【解决方案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('');

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

【讨论】：