HTML使<option>无效

Question

我在设计的网站的联系表单中有以下代码:

<select id="Category" name="Category">
    <option value="0" selected="selected" disabled>Category</option>
    <option value="1">General Info</option>
    <option value="2">Booking</option>
    <option value="3">Auditions</option>
</select>

我想设置菜单,使用户不能离开category作为选定的选项.有没有办法用HTML做到这一点？如果没有,我将如何使用JavaScript？

谢谢

Answer 1

根据HTML5规范,

约束验证:如果元素都有其required特定的属性,以及任没有option的元素select元素的选项列表中有自己的 selectedness设置为true,或仅option在元素select元素的选项列表,其 selectedness设置为true是占位符标签选项,然后该元素正在失踪.

如果select元素required指定了属性,则没有multiple指定属性,并且显示大小为1; 如果元素的选项列表中的第一个 元素的值(如果有的话)是空字符串,并且该 元素的父节点是元素(而不是 元素),那么这就是select元素的占位符标签选项.optionselectoptionselectoptgroupoption

因此,你可以使用

<select id="Category" name="Category" required>
  <option value="" selected disabled>Category</option>
  <option value="1">General Info</option>
  <option value="2">Booking</option>
  <option value="3">Auditions</option>
</select>

Answer 2

当用户单击任何选项时，他无法返回第一个选项。但是他可以不修改提交表单，那么你需要通过JS验证。

很简单，

function validate() {
    var select = document.getElementById('Category');
    return !select.value == 0;
}

以及 HTML 中的表单：

<form onsubmit="return validate()">...</form>