Question

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

我看到<select>不支持新的required属性...那么我必须使用JavaScript吗？还是有什么我想念的？：/

Answer 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=""），

那个   option元素的父节点是   选择元素（而不是optgroup   元素），


然后那个选项是   选择元素的占位符标签   选项。

Answer 2

<select>元素确实支持required属性，根据规范：

http://dev.w3.org/html5/spec-author-view/the-select-element.html#the-select-element

哪个浏览器不尊重这个？

（当然，您必须在服务器上进行验证，因为您无法保证用户将启用JavaScript。）

Answer 3

您可以使用option元素的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>

Answer 4

是的，它正在运作：

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

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

Answer 5

首先你必须在第一个选项中指定空白值。即选择此处。只有必需才能使用。

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

Answer 7

将选择框的第一项的值设为空白。

因此，每当您发布FORM时，您都会获得空白值，并且使用这种方式您会知道用户没有从下拉列表中选择任何内容。

<select name="user_role" required>
    <option value="">-Select-</option>
    <option value="User">User</option>
    <option value="Admin">Admin</option>
</select>

Answer 8

您需要将value的{{1}}属性设置为空字符串：

option

当用户在

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

value会将所选option的{{1}}返回给服务器。空submit与空form输入相同 - ＆gt;提出value消息。

w3schools

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

Example

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

Answer 10

如果第一个选项的值为null，则效果很好。说明：HTML5在提交按钮时将读取一个空值。如果不为null（值属性），则假定所选值不为null，因此验证将起作用，即通过检查option标记中是否有数据。因此，它不会产生验证方法。但是，我想另一方面，如果value属性设置为null，即（value =“”），HTML5将在第一个或默认选择的选项上检测到空值，从而发出验证消息。感谢您的询问。乐于帮助。很高兴知道我是否这样做。

Answer 11

在html5中，你可以使用完整的表达式：

<select required="required">

我不知道为什么短表达不起作用，但试试这个。它会解决。

Answer 12

试试这个

<select>
<option value="" style="display:none">Please select</option>
<option value="one">One</option>
</select>

Answer 13

你也可以使用JQuery

动态地完成它

设置必需

$("#select1").attr('required', 'required');

删除所需的

$("#select1").removeAttr('required');

我可以将所需属性应用于HTML5中的<select>字段吗？</select>

13 个答案: