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

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

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

强制 ：第一个值为空 – 需要在空值上工作

先决条件 ：正确的HTML5 DOCTYPE和一个指定的input字段 

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

根据文件 （列表和粗体是我的）

必需的属性是一个布尔属性。
指定时，用户将被要求在提交表单之前select一个值。

如果select元素

  • 具有指定的必需属性，
  • 没有指定多个属性，
  • 并且具有1的显示尺寸（不具有SIZE = 2或更多 – 如果不需要则省略）;
  • 如果select元素的选项列表（如果有的话）中的第一个选项元素的值是空string ，
  • 并且该选项元素的父节点是select元素（而不是optgroup元素），

那么该选项是select元素的占位符标签选项。

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

哪个浏览器不尊重这个？

（当然，你必须在服务器上进行validation，因为你不能保证用户将启用JavaScript。）

您可以使用选项元素的selected属性来默认select一个选项。 您可以使用select元素的required属性来确保用户select某个内容。

在Javascript中，您可以检查selectedIndex属性以获取所选选项的索引，或者可以检查value属性以获取所选选项的值。

根据HTML5规范， selectedIndex返回第一个select的项目的索引（如果有的话），如果没有select的项目，则返回-1; value返回第一个select的项目的值（如果有的话）或者空stringif没有select的项目。“因此，如果selectedIndex = -1，那么你知道他们没有select任何东西。 

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

是的，这是工作： 

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

你必须保持第一个选项空白。 

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

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

 <select required="required">

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

首先你必须在第一个选项中分配空白值。 即selecthere.than只需要将工作。

使select框的第一项的值为空。

所以，当你发布每一个表格时，你会得到一个空白的值，用这种方式你会知道用户没有从下拉菜单中select任何东西。 

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

尝试这个 

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

您也可以使用JQuerydynamic地执行此操作

需要设置 

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

删除必需 

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