logo标签列表

我可以翻译这个问题：在HTML中，我能否将必填属性应用于<select>字段？

javascripthtmlselectrequired
312

我该如何检查用户是否从 HTML 的 <select> 字段中选择了某些内容？

我发现 <select> 不支持新的 required 属性...难道我必须使用 JavaScript 吗？或者我有什么遗漏吗？ :/

1
如果您对任何级别的跨浏览器兼容性感兴趣，那么您可能需要使用JavaScript。您想要的属性是 selectedIndex。 - Luke Sneeringer
4
根据HTML5规范的最新编辑稿（2011年8月6日），select元素确实具有required属性。"required属性是一个布尔属性。当指定时，用户在提交表单之前必须选择一个值。" 参考链接：http://dev.w3.org/html5/spec/Overview.html#the-select-element - james.garriss
13个回答
580

必填项：将第一个值留空 - required 可用于空值

先决条件: 正确的HTML5 DOCTYPE和命名输入字段

<select name="somename" required>
<option value="">Please select</option>
<option value="one">One</option>
</select>
根据文档（列表和粗体字是我的添加）：
必需属性是一个布尔属性。 如果指定了该属性，则在提交表单之前，用户将需要选择一个值。
如果元素（而不是optgroup元素）， 则该选项是
36
为了让用户在选择一次之后不能再选择非选项:<option selected="selected" disabled="disabled" value="">请选择</option>。 （注：该翻译为尽量保持原意的情况下，使语言更加通俗易懂，如需专业用语请告知。） - coolaj86
4
@CoolAJ86 的程序在 Chrome 23、Firefox 16 和 IE 10 上运行良好。 - KTB
1
文档的释义非常有帮助，谢谢。 - nikodaemus
1
您可以使用 :valid CSS 选择器，根据是否选择了空值，为选择元素应用自定义样式。 - hughes
1
关于占位符选项的“disabled”属性的澄清：在Safari中运行良好，但在Firefox 74中失败（当页面显示时选择第二个选项元素）。 - fbitterlich
显示剩余14条评论
15
10
我确定他只需要在第一个输入框中添加 value="" 属性——如果没有 value 属性或所有选项都没有值，那么必填项验证不会触发，因为选择框返回的是实际值。 - mplungjan
1
@mplungjan：啊，明白了 - 发现得好。 - Paul D. Waite
1
@PaulD.Waite жҲ‘们д»Қ然дёҚиғҪдҝқиҜҒз”ЁжҲ·еҗҜз”ЁдәҶJavascriptеҗ—пјҹжҲ‘еҸӘд»ҺдәӢWebејҖеҸ‘зәҰ2е№ҙпјҢжҲ‘д»ҺжңӘйҒҮеҲ°иҝҮиҝҷдёӘй—®йўҳгҖӮ - user137717
4
这是网络世界，无法保证任何事情。当然，你可以决定不去迎合它。 - Paul D. Waite
13

是的，它正在运作中：

<select name="somename" required>
     <option value="">Please select</option>
     <option value="one">One</option>
</select>

你必须将第一个选项留空。

7
您可以使用选项元素的 "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>
1
@Apostle - 请停止通过编辑尝试更改此答案。如果您认为它不正确，请随意留下您自己的答案。 - Brad Larson
@BradLarson 起初我并没有完全理解：这段代码不是这个问题的完整解决方案，还是对答案最后一段的解释性示例。在这种情况下可能是后者。我认为最好将这段代码组织成片段，并显示结果-1。抱歉，我没有先在评论中澄清。 - Apostle
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>

select会在用户在 form 上按下 submit 时将所选option的value返回给服务器。空的value等同于空的text输入，会触发required提示信息。

w3schools

value属性指定了在提交表单时要发送到服务器的值。

示例

如果您尝试应用required属性，请使用:invalid CSS伪类，因为它适用于所有浏览器，这是最完美的答案！另一个答案是在<select>元素中具有required属性的和selected属性的<option>元素中没有required属性，无法使用CSS :invalid。 - vee
2
<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>
5
这个答案仅仅重复了之前的例子，并没有额外的解释。 - james.garriss
1
请在您的答案中添加一些解释，以便其他人可以从中学习。 - Nico Haase
2

试试这个，这个会起作用的，我已经试过了，它有效。

<!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>
1
请在您的答案中添加一些解释，以便其他人可以从中学习。 - Nico Haase
1
将选择框的第一个项目的值设为空白。这样，每当您提交表单时，都会得到空白值，并且使用此方法，您将知道用户没有从下拉列表中选择任何内容。
<select name="user_role" required>
    <option value="">-Select-</option>
    <option value="User">User</option>
    <option value="Admin">Admin</option>
</select>
1
如果第一个选项的值为null，则可以完美地工作。解释：HTML5将在按钮提交时读取null值。 如果不是null（value属性），则假定所选值不为null，因此验证将起作用，即通过检查选项标记中是否有数据来进行验证。 因此，它将不会产生验证方法。 但是，我想另一面变得清晰，如果将value属性设置为null，即（value =“”），则HTML5将检测到第一个或默认选择的选项为空值，从而输出验证消息。谢谢询问。乐意帮忙。如果我做了什么，请告诉我。
1

首先，您需要在第一个选项中分配空值。即选择“这里”，然后才能正常工作。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接