我该如何检查用户是否从 HTML 的 <select>
字段中选择了某些内容?
我发现 <select>
不支持新的 required
属性...难道我必须使用 JavaScript 吗?或者我有什么遗漏吗? :/
我该如何检查用户是否从 HTML 的 <select>
字段中选择了某些内容?
我发现 <select>
不支持新的 required
属性...难道我必须使用 JavaScript 吗?或者我有什么遗漏吗? :/
必填项:将第一个值留空 - required 可用于空值
先决条件: 正确的HTML5 DOCTYPE和命名输入字段
<select name="somename" required>
<option value="">Please select</option>
<option value="one">One</option>
</select>
根据文档(列表和粗体字是我的添加)::valid
CSS 选择器,根据是否选择了空值,为选择元素应用自定义样式。 - hughes<select>
元素支持required
属性,这是规范中明确规定的:哪个浏览器不支持呢?(当然,你仍然需要在服务器端进行验证,因为无法保证用户启用了JavaScript)是的,它正在运作中:
<select name="somename" required>
<option value="">Please select</option>
<option value="one">One</option>
</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>
-1
。抱歉,我没有先在评论中澄清。 - Apostle您需要将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
提示信息。
value
属性指定了在提交表单时要发送到服务器的值。
required
属性,请使用:invalid
CSS伪类,因为它适用于所有浏览器,这是最完美的答案!另一个答案是在<select>
元素中具有required
属性的和selected
属性的<option>
元素中没有required
属性,无法使用CSS :invalid
。 - vee<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>
试试这个,这个会起作用的,我已经试过了,它有效。
<!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>
<select name="user_role" required>
<option value="">-Select-</option>
<option value="User">User</option>
<option value="Admin">Admin</option>
</select>
首先,您需要在第一个选项中分配空值。即选择“这里”,然后才能正常工作。
selectedIndex
。 - Luke Sneeringer