我可以将 required 属性应用于 HTML5 中的 <select> 字段吗？
Posted
技术标签:
【中文标题】我可以将 required 属性应用于 HTML5 中的 <select> 字段吗？【英文标题】：Can I apply the required attribute to <select> fields in HTML5? 【发布时间】：2011-08-28 06:27:09 【问题描述】：如何检查用户是否从 html5 中的 <select> 字段中选择了某些内容？
我看到<select> 不支持新的required 属性...那我必须使用javascript 吗？还是我缺少什么？ ：/
【问题讨论】：
如果您对任何级别的跨浏览器兼容性感兴趣，您可能不得不使用 JavaScript。你想要的属性是selectedIndex。
根据 HTML5 规范的当前编辑草稿（2011 年 8 月 6 日），select 元素确实具有必需的属性。 “必需的属性是一个布尔属性。指定后，用户将需要在提交表单之前选择一个值。” dev.w3.org/html5/spec/Overview.html#the-select-element
【参考方案1】：
强制：将第一个值留空 - 要求对空值起作用
先决条件：正确的 html5 DOCTYPE 和命名输入字段
<select name="somename" required>
<option value="">Please select</option>
<option value="one">One</option>
</select>
根据the documentation（列表和粗体是我的）
必需的属性是布尔值 属性。 指定时，用户 将需要选择一个值 在提交表单之前。
如果是一个选择元素
指定了一个必需的属性， 没有指定多重属性， 并且显示尺寸为 1（不具有 SIZE=2 或更大 - 如果不需要，请省略它）； 如果值 中的第一个选项元素 选择元素的选项列表（如果 any) 是空字符串（即显示为value=""）， 还有那个 选项元素的父节点是 选择元素（而不是 optgroup 元素），那么这个选项就是 选择元素的占位符标签 选项。
【讨论】：
另外，这样用户就不能选择非选项一旦它被选中： 这没有意义......而且它在几个浏览器上也不起作用 @CoolAJ86 适用于 Chrome 23、Firefox 16 和 IE 10。 我看到 2 票反对。如果您想对 WHY 的这个 PLEASE 评论投反对票 文档的释义非常有帮助；谢谢【参考方案2】：根据规范，<select> 元素确实支持 required 属性：
哪个浏览器不支持这一点？
（当然，无论如何你都必须在服务器上进行验证，因为你不能保证用户会启用 JavaScript。）
【讨论】：
我确信他只需要一个 value="" 在第一个条目上 - 如果没有 value 属性或所有选项上的 value 所需的失败触发，因为 select 返回一个实际值跨度> @mplungjan：啊，明白了——很好。 @PaulD.Waite 我们还不能保证用户会启用 Javascript 吗？我现在只从事网络开发大约 2 年，而且我从未遇到过这个问题。 @user137717：这是网络。你不能保证什么。当然，您可以决定不值得满足。【参考方案3】：是的，它正在工作：
<select name="somename" required>
<option value="">Please select</option>
<option value="one">One</option>
</select>
您必须将第一个选项留空。
【讨论】：
【参考方案4】：默认情况下，您可以使用选项元素的selected 属性来选择选项。您可以对 select 元素使用 required 属性来确保用户选择了某些内容。
在Javascript中，您可以查看selectedIndex属性来获取所选选项的索引，也可以查看value属性来获取所选选项的值。
根据 HTML5 规范，selectedIndex“返回第一个选中项的索引，如果有的话，或者 -1 如果没有选中项。value”返回第一个选中项的值，如果任何，或者如果没有选定的项目，则为空字符串。”所以如果 selectedIndex = -1，那么你知道他们没有选择任何东西。
<button type="button" onclick="displaySelection()">What did I pick?</button>
<script>
function displaySelection()
var mySelect = document.getElementById("someSelectElement");
var mySelection = mySelect.selectedIndex;
alert(mySelection);
</script>
【讨论】：
@Apostle - 请停止尝试通过编辑更改此答案。如果您认为这是不正确的，请随时留下您自己的答案。 @BradLarson 起初我不太明白：代码不是此问题中问题的完整解决方案，或者是此答案最后一段的解释性示例.在这种情况下可能是第二个。我认为最好将此代码组织为 sn-p 并显示结果-1。抱歉，我没有先在 cmets 中澄清。【参考方案5】：
需要将option的value属性设置为空字符串：
<select name="status" required>
<option selected disabled value="">what's your status?</option>
<option value="code">coding</option>
<option value="sleep">sleeping</option>
</select>
当用户在form 上按下submit 时，select 会将所选option 的value 返回到服务器。空的value 与空的text 输入相同-> 引发required 消息。
w3schools
value 属性指定提交表单时要发送到服务器的值。
Example
【讨论】：
【参考方案6】：<form action="">
<select required>
<option selected disabled value="">choose</option>
<option value="red">red</option>
<option value="yellow">yellow</option>
<option value="green">green</option>
<option value="grey">grey</option>
</select>
<input type="submit">
</form>
【讨论】：
这个答案只是重复了前面的例子，没有额外的解释。 请在您的答案中添加一些解释，以便其他人可以从中学习【参考方案7】：首先您必须在第一个选项中分配空白值。 即在此处选择。仅需要即可。
【讨论】：
【参考方案8】：将选择框第一项的值设为空白。
因此，当您每次发布表单时，您都会获得空白值，并且使用这种方式您会知道用户没有从下拉列表中选择任何内容。
<select name="user_role" required>
<option value="">-Select-</option>
<option value="User">User</option>
<option value="Admin">Admin</option>
</select>
【讨论】：
【参考方案9】：试试这个，这个行得通，我试过这个，这个行得通。
<!DOCTYPE html>
<html>
<body>
<form action="#">
<select required>
<option value="">None</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<input type="submit">
</form>
</body>
</html>
【讨论】：
请在您的答案中添加一些解释，以便其他人可以从中学习【参考方案10】：如果第一个选项的值为 null，则效果很好。解释 ：HTML5 将在按钮提交时读取空值。如果不为空（值属性），则假定所选值不为空，因此验证将起作用，即通过检查选项标签中是否存在数据。因此它不会产生验证方法。但是，我猜另一面很清楚，如果 value 属性设置为 null 即 (value = "" )，HTML5 将在第一个或更确切地说是默认选择的选项上检测到一个空值，从而发出验证消息。谢谢你的提问。乐意效劳。很高兴知道我是否这样做了。
【讨论】：
【参考方案11】：在 html5 中你可以使用完整的表达式：
<select required="required">
我不知道为什么短表达式不起作用，但试试这个。 会解决的。
【讨论】：
【参考方案12】：试试这个
<select>
<option value="" style="display:none">Please select</option>
<option value="one">One</option>
</select>
【讨论】：
请在您的答案中添加一些解释，以便其他人可以从中学习【参考方案13】：你也可以用 JQuery 动态地做到这一点
需要设置
$("#select1").attr('required', 'required');
删除必需的
$("#select1").removeAttr('required');
【讨论】：
以上是关于我可以将 required 属性应用于 HTML5 中的 <select> 字段吗？的主要内容，如果未能解决你的问题，请参考以下文章