我怎么能检查用户是否从HTML5中的<select>字段选择了一些东西?

我看到<select>不支持新的必需属性…我必须使用JavaScript吗?还是我遗漏了什么?:/


当前回答

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

所以当你发布表单时,你会得到空白值,使用这种方式,你会知道用户没有从下拉菜单中选择任何东西。

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

试试这个,这个会有用的,我试过了,这个有用。

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

你也可以用JQuery动态地做到这一点

设置所需的

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

删除需要

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

默认情况下,您可以使用option元素的selected属性来选择一个选项。您可以使用select元素的必需属性来确保用户选择了一些东西。

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