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

如何实现主题？

当我写：

<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标签？

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

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

• selected 使此选项成为默认选项。
• disabled 使该选项不可点击。
• style='display: none'使该选项在较旧的浏览器中不显示。请参阅：我可以使用隐藏属性文档。
• hidden 使该选项不显示在下拉列表中。

你可以通过设置selectedIndex来-1使用.prop：http://jsfiddle.net/R9auG/。

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

只需使用

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

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

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

这是使用普通JavaScript的一种简单方法。这与pimvdb发布的jQuery脚本非常相似。您可以在这里进行测试。

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

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

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

您可以（尽管不建议这样做）监视更改事件，然后使用JS删除第一个选项（如果为空）。

对于纯HTML @isherwood有一个很好的解决方案。对于jQuery，给您的select下拉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(''); 

如果您需要在不重新加载页面的情况下删除下拉菜单，则可以轻松完成所需的操作，并将其放入可以在页面上调用的函数中。

你可以试试这个片段

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

它为我工作。