下拉列表中没有空白项的空白 HTML SELECT
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6223865/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Blank HTML SELECT without blank item in dropdown list
提问by Nick Stavrogin
How implement subj?
如何实现subj？
when i write:
当我写：
<form>
<select>
<option value="0">aaaa</option>
<option value="1">bbbb</option>
</select>
</form>
then default selected item is "aaaa"
然后默认选择的项目是“aaaa”
when i write:
当我写：
<form>
<select>
<option value=""></option>
<option value="0">aaaa</option>
<option value="1">bbbb</option>
</select>
</form>
then default selected item is blank, but this blank item presents in drop down.
然后默认选定的项目是空白的，但这个空白项目出现在下拉列表中。
how i can implement SELECT tag with default blank value that hidden in dropdown list?
我如何使用隐藏在下拉列表中的默认空白值来实现 SELECT 标签？
回答by Eduardo
Just use disabled and/or hidden attributes:
只需使用禁用和/或隐藏属性：
<option selected disabled hidden style='display: none' value=''></option>
selectedmakes this option the default one.disabledmakes this option unclickable.style='display: none'makes this option not displayed in older browsers. See: Can I Usedocumentation for hidden attribute.hiddenmakes this option to don't be displayed in the drop-down list.
selected使此选项成为默认选项。disabled使该选项不可点击。style='display: none'使此选项不会在旧浏览器中显示。请参阅：我可以使用隐藏属性的文档。hidden使该选项不显示在下拉列表中。
回答by pimvdb
You can by setting selectedIndexto -1using .prop: http://jsfiddle.net/R9auG/.
您可以设置selectedIndex为-1使用.prop：http: //jsfiddle.net/R9auG/。
For older jQuery versions use .attrinstead of .prop: http://jsfiddle.net/R9auG/71/.
对于较旧的 jQuery 版本，请使用：http: //jsfiddle.net/R9auG/71/.attr代替。.prop
回答by mvreijn
Simply using
简单地使用
<option value="" selected disabled>Please select an option...</option>
will work anywhere without script and allow you to instruct the user at the same time.
无需脚本即可在任何地方工作，并允许您同时指导用户。
回答by Andrey R
<select>
<option value="" style="display:none;"></option>
<option value="0">aaaa</option>
<option value="1">bbbb</option>
</select>
回答by Mingwei Samuel
Here is a simple way to do it using plain JavaScript. This is the vanilla equivalent of the jQuery script posted by pimvdb. You can test it here.
这是使用纯 JavaScript 执行此操作的简单方法。这是 pimvdb 发布的 jQuery 脚本的 vanilla 等效项。你可以在这里测试它。
<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>
Make sure the "id_here" matches in the form and in the JavaScript.
确保表单和 JavaScript 中的“id_here”匹配。
回答by Quentin
You can't. They simply do not work that way. A drop down menu must have one of its options selected at all times.
你不能。他们只是不那样工作。下拉菜单必须始终选择其选项之一。
You could (although I don't recommend it) watch for a changeevent and then use JS to delete the first option if it is blank.
您可以（尽管我不建议这样做）监视更改事件，然后使用 JS 删除第一个选项（如果它为空）。
回答by Jason Slobotski
For purely html @isherwood has a great solution. For jQuery, give your select drop down an ID then select it with jQuery:
对于纯 html，@isherwood 有一个很好的解决方案。对于 jQuery，给你的选择下拉一个 ID，然后用 jQuery 选择它：
<form>
<select id="myDropDown">
<option value="0">aaaa</option>
<option value="1">bbbb</option>
</select>
</form>
Then use this jQuery to clear the drop down on page load:
然后使用此 jQuery 清除页面加载下拉列表：
$(document).ready(function() {
$('#myDropDown').val('');
});
Or put it inside a function by itself:
或者将它单独放在一个函数中：
$('#myDropDown').val('');
accomplishes what you're looking for and it is easy to put this in functions that may get called on your page if you need to blank out the drop down without reloading the page.
完成您正在寻找的内容，如果您需要在不重新加载页面的情况下清空下拉列表，则很容易将其放入可能在您的页面上调用的函数中。
回答by Shenbag
You can try this snippet
你可以试试这个片段
$("#your-id")[0].selectedIndex = -1
It worked for me.
它对我有用。
