在下拉列表中没有空白项的空白HTML选择

107

当我写：

<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标签与隐藏在下拉列表中的默认空白值？

来源

2011-06-03 Nick Stavrogin

可能重复的[默认选择选项为空]（http://stackoverflow.com/questions/8605516/default-select-option-as-blank） – Blazemonger 2015-10-27 20:39:40

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

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

来源

2011-06-03 06:46:54 Quentin

为什么你不建议这种行为？ – 2012-06-01 15:17:12

有很多情况下，你希望用户主动从列表中选择一些东西。我不认为JS是最好的方式（尽管它似乎是唯一的方式），但我真的认为这应该是一种方式。 – qwerty 2013-05-14 17:08:53

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

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

来源

2011-06-03 06:49:35 pimvdb

也适用于IE8。 – IronicMuffin 2012-03-05 20:23:49

@IronicMuffin：谢谢;事实上，它只是经过测试，似乎适用于所有主流浏览器。 – pimvdb 2012-03-05 20:29:57

@zobidafly：感谢编辑;我详细阐述了一点。 – pimvdb 2012-04-12 14:20:44

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

来源

2011-12-16 14:37:56

FF /铬 - OK，歌剧/ ie7-9 - 也不行您可以测试，这里（带或不带JS）：http://jsfiddle.net/R9auG/145/ 所以我建议JS-方法通过@pimvdb – tibalt 2012-10-04 04:11:49

这里有一个简单的方法使用普通的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中的内容。

来源

2013-06-11 21:37:51

177

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

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

selected使这个选项的默认之一。
disabled使此选项不可点击。
style='display: none'使此选项在旧版浏览器中不显示。请参阅：Can I Use关于隐藏属性的文档。
hidden使此选项不会显示在下拉列表中。

来源

2013-08-28 14:33:43 Eduardo

+13

为什么这个简单的解决方案不被接受。有用。 – bonaca 2013-09-05 13:47:42

其实IE 11确实显示“隐藏”选项。 – 2013-10-15 18:47:36

Webkit似乎不支持“隐藏”属性 – 2014-06-24 16:19:31

只需用

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

将任何地方工作，没有脚本，让你在同一时间通知用户。

来源

2013-10-31 10:38:09 mvreijn

你可以试试这个片断

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

它为我工作。

来源

2014-02-06 23:02:33 Shenbag

为了提供更清晰的解释，最好提供一个http://jsfiddle.net/以配合答案。 – Anonymous 2014-02-06 23:25:22

这假设OP使用jQuery。 – evanrmurphy 2014-10-07 19:18:50

纯粹的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('');

完成你在找什么，很容易把这个在可能会叫你的页面上，如果你需要空出下拉无需重新加载页面的功能。

来源

2016-01-23 04:53:09

在下拉列表中没有空白项的空白HTML选择

回答

相关问题